@zanichelli/albe-web-components 19.3.0-RC6 → 19.3.0

package/dist/esm/z-app-header_12.entry.js

@@ -1,8 +1,9 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, d as getElement } from './index-fIt9Ytc6.js';
-import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, O as OffCanvasVariant, c as ButtonType, $ as IconPosition, D as DividerSize, h as DividerOrientation, k as LabelPosition, I as InputType, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-BKCj6NR2.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { g as KeyboardCode, e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant, c as ButtonType, a0 as IconPosition, D as DividerSize, h as DividerOrientation, k as LabelPosition, I as InputType, f as InputStatus, i as ListSize, m as ListType, j as ExpandableListButtonAlign, l as ListDividerType, E as ExpandableListStyle } from './index-B3nR3-Jw.js';
 import { B as Breakpoints } from './breakpoints-Q-tWjk7P.js';
-import { a as containsElement, r as randomId, d as boolean, n as handleEnterKeydSubmit } from './utils-BEzZQwOB.js';
+import { a as containsElement, r as randomId, d as boolean, s as getTabbableElements, v as handleEnterKeydSubmit } from './utils-C9lc3rtK.js';
 import { C as COLOR_INDICATOR_ICONS, I as ICONS } from './iconset-AwzX9V8L.js';
+import { R as ReactiveControllerHost, F as FocusTrapController } from './reactive-controller-DXvzHFid.js';
 
 const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}: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-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 
@@ -1000,10 +1001,11 @@ const ZListGroup = class {
 };
 ZListGroup.style = stylesCss$5();
 
-const stylesCss$4 = () => `.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden 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}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;
+const stylesCss$4 = () => `.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden 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;outline:none}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;
 
-const ZOffcanvas = class {
+const ZOffcanvas = class extends ReactiveControllerHost {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
         /**
@@ -1024,64 +1026,23 @@ const ZOffcanvas = class {
         /**
          * Skip the opening transition when the offcanvas is already open at the first render.
          * @deprecated This prop is not needed anymore, the component will automatically skip the transition
-         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+         * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
          */
         this.skipLoadAnimation = false;
-        /** Whether to show the backdrop when the offcanvas is open. Default: true */
+        /** Whether to show the backdrop when the offcanvas is open and variant is not `pushcontent`. Default: `true` */
         this.showBackdrop = true;
         /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
-    }
-    /**
-     * Returns all focusable elements inside the offcanvas content.
-     * Elements are considered focusable if:
-     * - They are not disabled
-     * - They are visible in the layout
-     * - They have a non-negative tabIndex or an explicit tabindex="0"
-     */
-    getFocusableElements() {
-        if (!this.canvasContent) {
-            return [];
-        }
-        const all = Array.from(this.canvasContent.querySelectorAll("*"));
-        return all.filter((el) => {
-            const tabindex = el.getAttribute("tabindex");
-            const isDisabled = el.hasAttribute("disabled");
-            const isHidden = el.offsetParent === null;
-            return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === "0");
+        this.focusTrapController = new FocusTrapController(this, {
+            fallbackFocus: () => this.canvasContent,
+            isActive: () => this.open && this.variant === OffCanvasVariant.OVERLAY,
         });
     }
     /**
-     * Keeps keyboard navigation trapped inside the offcanvas when it is open.
-     * Implements circular tab navigation:
-     * - If Shift + Tab is pressed on the first focusable element, move focus to the last.
-     * - If Tab is pressed on the last focusable element, move focus to the first.
-     */
-    trapFocus(event) {
-        if (!this.allFocusableElements.length) {
-            return;
-        }
-        const first = this.allFocusableElements[0];
-        const last = this.allFocusableElements[this.allFocusableElements.length - 1];
-        const active = document.activeElement;
-        if (event.shiftKey && active === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        if (!event.shiftKey && active === last) {
-            event.preventDefault();
-            first.focus();
-        }
-    }
-    /**
-     * Handles keyboard interactions when the offcanvas is open.
-     * - Closes the offcanvas when the Escape key is pressed.
-     * - Traps focus inside the component when the Tab key is used.
+     * Handles Escape and wrap-around Tab navigation at the focus boundaries.
      */
     handleKeyDown(event) {
-        if (!this.open) {
+        if (!this.open || this.variant !== OffCanvasVariant.OVERLAY) {
             return;
         }
         if (event.key === KeyboardCode.ESC) {
@@ -1089,80 +1050,52 @@ const ZOffcanvas = class {
             this.open = false;
             return;
         }
-        if (event.key === KeyboardCode.TAB) {
-            this.trapFocus(event);
-        }
-    }
-    /**
-     * Stop the event default behavior and propagation when the offcanvas is closed.
-     */
-    stopEvent(event) {
-        if (this.open) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
+        this.focusTrapController.handleWrapTab(event);
     }
     /**
-     * Hide the body overflow when the offcanvas is open.
+     * Lock the page scroll when the offcanvas is open and unlock it when the offcanvas is closed.
      */
-    handlePageOverflow() {
+    handlePageScroll() {
         const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
             ? "overflow-y"
             : "overflow-x";
-        document.body.style[overflow] = this.open ? "hidden" : "";
+        this.host.ownerDocument.body.style[overflow] = this.open ? "hidden" : "";
     }
     onOpenChanged() {
-        var _a, _b, _c;
         this.canvasOpenStatusChanged.emit(this.open);
-        if (this.open) {
-            // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.
-            this.previouslyFocusedElement = document.activeElement;
-            // Move focus inside the offcanvas once it is rendered.
-            if (this.allFocusableElements.length > 0) {
-                this.allFocusableElements[0].focus();
-            }
-            else {
-                (_a = this.canvasContent) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            this.handlePageOverflow();
-        }
-        else {
-            // Restore focus to the element that was focused before the offcanvas was opened.
-            (_b = this.previouslyFocusedElement) === null || _b === void 0 ? void 0 : _b.focus();
-            // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.
-            const listenerCallback = () => {
-                this.handlePageOverflow();
-                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
-            };
-            (_c = this.canvasContainer) === null || _c === void 0 ? void 0 : _c.addEventListener("transitionend", listenerCallback);
-        }
+        this.handlePageScroll();
+        this.focusTrapController.sync();
     }
     componentWillLoad() {
         if (this.open) {
-            this.skipAnimation = true;
+            this.skipAnimation = true; // TODO: remove this line when `skipLoadAnimation` prop is removed.
         }
-    }
-    componentDidLoad() {
-        this.handlePageOverflow();
+        return super.componentWillLoad();
     }
     componentDidRender() {
-        this.skipAnimation = false;
-        this.allFocusableElements = this.getFocusableElements();
+        this.skipAnimation = false; // TODO: remove this line when `skipLoadAnimation` prop is removed.
     }
-    connectedCallback() {
-        this.handlePageOverflow();
+    componentDidLoad() {
+        if (this.open) {
+            this.onOpenChanged();
+        }
     }
     disconnectedCallback() {
-        this.open = false;
+        this.handlePageScroll();
+        super.disconnectedCallback();
     }
     render() {
-        return (h(Host, { key: '8775a7fea17fac8ddcf69a1a1001b69aa1d29ae7', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4ca1eae5425dc05fe71d1bc171481ad22b90d0b7', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'b22cbee1928706351f03099ab860957403f529a7', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '96e1701e1e400dbe09c7625debcb79ec06fe91fb', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'bf842940be8987308e745bdda6b9254171045a62', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '7296200f4eb4aa2f332af790ea04d6e6e78e824c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: '8aef7db88fcecdc89484aad70c3a30973dbf17d8', class: "canvas-container" }, h("div", { key: 'ca715459c24fe5256987efd279db222446186692', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'a365eb11a346deaa1d93deee0e0625858070296e', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '4e918c25bda62190bc87720ceb3269d99bd4ad5d', class: "backdrop", onClick: (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = false;
+            } }))));
     }
+    get host() { return getElement(this); }
     static get watchers() { return {
         "variant": [{
-                "handlePageOverflow": 0
+                "handlePageScroll": 1
             }],
         "open": [{
                 "onOpenChanged": 0
@@ -1383,17 +1316,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'a08d7cbf665fc71a412f13ce8e6d0424ceeb929d', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'd5987d36585f496b8eebc3eeda36815d629c0b2a', class: "input-container" }, h("z-input", { key: 'cb54997fa4598f8b746c8f0685c283facb8545a6', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (h(Host, { key: '511bdb107a222201f119e5d9fc0e936adb2e9658', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'b31f7c2ece0d26218f8d586217180061ee84a02f', class: "input-container" }, h("z-input", { key: 'c2d0d0f22126a5676949664e21f37c6450e6e645', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
             }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: 'e872905bfe52aef6fa6c49579c7d12e1ebc66bb9', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (h("div", { key: 'acbce883c61063828aa863072282a806da42abef', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '5fcbf61d74fd3294f1de8ae9a2a7432ddd894bd4', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'dda2667e972cbe44b36f35b53363020ca96de5dc', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1420,13 +1353,16 @@ const ZTag = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'eafe79f7342455535bc2d0550819506bb5f2417d', class: {
+        return (h(Host, { key: 'd5f0ba8914c2d1503af21e5ee3ebcf81c35e9475', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: 'a0cb672be061f30da008e60acf3d8104faf00e9d', name: this.icon }), h("div", { key: '688919faeafac3d13f92a7a24d0f1a4c54570d79' }, h("slot", { key: '129f3625ee07bfb97a1c23e65b6014427a5d8232' }))));
+            } }, this.icon && h("z-icon", { key: 'c15ecbd499567cfbd03a2f64117858676dc6e353', name: this.icon }), h("div", { key: '6b22a48ec600929db078c2fdb692c828ac3bf6e3' }, h("slot", { key: '6566b710bdb7a0fa765628e2dad24ad4b0bc9bd8' }))));
     }
     get host() { return getElement(this); }
 };
 ZTag.style = stylesCss();
 
 export { ZAppHeader as z_app_header, ZButton as z_button, ZDivider as z_divider, ZIcon as z_icon, ZInput as z_input, ZInputMessage as z_input_message, ZList as z_list, ZListElement as z_list_element, ZListGroup as z_list_group, ZOffcanvas as z_offcanvas, ZSearchbar as z_searchbar, ZTag as z_tag };
+//# sourceMappingURL=z-app-header.z-button.z-divider.z-icon.z-input.z-input-message.z-list.z-list-element.z-list-group.z-offcanvas.z-searchbar.z-tag.entry.js.map
+
+//# sourceMappingURL=z-app-header_12.entry.js.map