@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/esm/z-table.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
-import './index-41ee4016.js';
-import './index-cfde9cec.js';
-import './index-ea49e441.js';
-import './index-437f0b00.js';
-import './utils-0ce33738.js';
-import './index-a7f69d42.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-a2130b6a.js';
+import './index-175661e6.js';
+import './index-b556b384.js';
+import './index-a81f1558.js';
+import './index-50bbb22e.js';
+import './utils-8ade9e2d.js';
+import './index-b7dbacb4.js';
 import './breakpoints-680e0e56.js';
-import './index-497d9441.js';
-import './index-aa07660e.js';
+import './index-292b4dd2.js';
+import './index-18018bb5.js';
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";
 const ZTableStyle0 = stylesCss;
@@ -41,7 +41,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '5f7370afd7912583561ac67baf5b70921c49eea2', expandable: this.expandable }, h("div", { key: '8cbf774ffe599cf49ed9377c2ff3c1e0e8d14e85', class: "table", role: "table" }, h("slot", { key: '318eceb0c4e486a49faab1fe7027acfa76456352' }))));
+        return (h(Host, { key: '2d8e50a74ff7ccf3c6dc4f5324a512177ad52f45', expandable: this.expandable }, h("div", { key: '5e1d9d44dc90ac06683bf5306f7eecadffe807fe', class: "table", role: "table" }, h("slot", { key: '12a615e336a4ad50390a2ab0b12b2d20b3503f06' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/z-tbody.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tbody } from './index-41ee4016.js';
-import './index-ab5f1eaa.js';
+export { Z as z_tbody } from './index-175661e6.js';
+import './index-a2130b6a.js';
 
 //# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm/z-td.entry.js

@@ -1,5 +1,5 @@
-export { Z as z_td } from './index-497d9441.js';
-import './index-ab5f1eaa.js';
-import './index-a7f69d42.js';
+export { Z as z_td } from './index-292b4dd2.js';
+import './index-a2130b6a.js';
+import './index-b7dbacb4.js';
 
 //# sourceMappingURL=z-td.entry.js.map

package/dist/esm/z-tfoot.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tfoot } from './index-cfde9cec.js';
-import './index-ab5f1eaa.js';
+export { Z as z_tfoot } from './index-b556b384.js';
+import './index-a2130b6a.js';
 
 //# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm/z-th.entry.js

@@ -1,5 +1,5 @@
-export { Z as z_th } from './index-aa07660e.js';
-import './index-ab5f1eaa.js';
-import './index-a7f69d42.js';
+export { Z as z_th } from './index-18018bb5.js';
+import './index-a2130b6a.js';
+import './index-b7dbacb4.js';
 
 //# sourceMappingURL=z-th.entry.js.map

package/dist/esm/z-thead.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_thead } from './index-ea49e441.js';
-import './index-ab5f1eaa.js';
+export { Z as z_thead } from './index-a81f1558.js';
+import './index-a2130b6a.js';
 
 //# sourceMappingURL=z-thead.entry.js.map

package/dist/esm/z-toast-notification-list.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-ab5f1eaa.js';
-import { s as ToastNotificationPosition } from './index-a7f69d42.js';
+import { r as registerInstance, h, g as getElement } from './index-a2130b6a.js';
+import { s as ToastNotificationPosition } from './index-b7dbacb4.js';
 
 const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
 const ZToastNotificationListStyle0 = stylesCss;
@@ -41,7 +41,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: 'ead27e0dd8742e6008aa4fc6ffa4129cae868af8', name: "toasts" });
+        return h("slot", { key: 'c358a615637656bb5b4cd475af919c495a278da5', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toast-notification.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
-import { r as ToastNotificationTransition } from './index-a7f69d42.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-a2130b6a.js';
+import { r as ToastNotificationTransition } from './index-b7dbacb4.js';
 import { m as mobileBreakpoint } from './breakpoints-680e0e56.js';
 
 var hammer = {exports: {}};
@@ -2826,7 +2826,7 @@ const ZToastNotification = class {
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: 'bf20c69f253b702092fe078443eedb9e86fe223a', style: {
+        return (h(Host, { key: '3553c94f59787f1fdbb0ea349578c61ebbda1c21', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-ab5f1eaa.js';
+import { r as registerInstance, c as createEvent, h } from './index-a2130b6a.js';
 
 const stylesCss = "button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}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 ZToggleButtonStyle0 = stylesCss;
@@ -21,10 +21,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '809ca74c63187ce21d411516d595bda6ed5b082b', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: 'a0335db670898e98b232857bd9f878f9f6bceaa0', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '66af2faa257599724f2506230eae3c0c612c0700', 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", { key: '353df156fc85eb6824152ec2a5578426263627b7', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/esm/z-toggle-switch.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-ab5f1eaa.js';
-import { k as LabelPosition } from './index-a7f69d42.js';
-import { r as randomId } from './utils-0ce33738.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-a2130b6a.js';
+import { k as LabelPosition } from './index-b7dbacb4.js';
+import { r as randomId } from './utils-8ade9e2d.js';
 import './breakpoints-680e0e56.js';
 
 const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
@@ -29,14 +29,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '1435f2d332c0a6ba1845640836e129eee281f1b0' }, h("input", { key: 'baea7ca82f300316bd418cadfc82718da7dc2f18', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '510a2f196cd5f67af2602c5c6e948e2f63395f6f', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'cd90ad41b289f192e485c0cce90ae2a8057ddd7d' }, h("input", { key: '5cc5e59f8cc0cc0548b072e41149cf7dc31bbcd8', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '9774cc39f7ebe6bd02c5ce0e05d1b53075f4e426', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'e32ef84026463fb9a99bcb303d0097ffed6ee994' }, h("slot", { key: '07344703d351893b5ab39e4e4a617e4038f1042a' })), h("span", { key: 'cec720a047a8fbc016048e9139639e04233f8f24', class: {
+            } }, h("span", { key: '074941585b8a5862f04bd2d404ab74c86bcaa250' }, h("slot", { key: '7fe6486df9479e76a7783646aed3e620f7f1d0f2' })), h("span", { key: 'd4bf4b3febdab1bf8e88c12e1c7aa421b020997c', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '4639384b98d6de8009678681d71d1097b2c687e6', class: "circle" }, this.checked && (h("z-icon", { key: 'd34f45d60cece7a6969be1a03ad51be4ab0b0f04', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'c46c06ff10a35060945b9298a551cf66508a5450', class: "circle" }, this.checked && (h("z-icon", { key: '7ed667dc510d42e3e001ad8cb82b5c5f9d012583', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/esm/z-tooltip.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-ab5f1eaa.js';
-import { P as PopoverPosition } from './index-a7f69d42.js';
+import { r as registerInstance, h } from './index-a2130b6a.js';
+import { P as PopoverPosition } from './index-b7dbacb4.js';
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 const ZTooltipStyle0 = stylesCss;
@@ -17,7 +17,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'ed88c22d97e3e84963b0d3b7c6ee03d401aa5ce8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '6b3cd438f4ab6cfb3459f67f9e8ea81b554a3ccb' })));
+        return (h("z-popover", { key: '2df25a3fa481ccc045d4a49f464c06d9d9c3e555', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '136991637393809eba3d6c6fad0f44209b8c8960' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/esm/z-tr.entry.js

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-437f0b00.js';
-import './index-ab5f1eaa.js';
-import './utils-0ce33738.js';
-import './index-a7f69d42.js';
+export { Z as z_tr } from './index-50bbb22e.js';
+import './index-a2130b6a.js';
+import './utils-8ade9e2d.js';
+import './index-b7dbacb4.js';
 import './breakpoints-680e0e56.js';
-import './index-497d9441.js';
-import './index-aa07660e.js';
+import './index-292b4dd2.js';
+import './index-18018bb5.js';
 
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-visually-hidden.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-ab5f1eaa.js';
+import { r as registerInstance, h } from './index-a2130b6a.js';
 
 const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 const ZVisuallyHiddenStyle0 = stylesCss;
@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: 'ae350dcba13aae6abc2f746555896c973baea496' });
+        return h("slot", { key: 'a99984e228cda9c10f7f96987a24ea9e1d695951' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/beans/index.d.ts

@@ -160,7 +160,9 @@ export declare enum KeyboardCode {
     ARROW_UP = "ArrowUp",
     ARROW_DOWN = "ArrowDown",
     BACKSPACE = "Backspace",
-    DELETE = "Delete"
+    DELETE = "Delete",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_LEFT = "ArrowLeft"
 }
 export type SelectItem = {
     id: string;

package/dist/types/components/deprecated/z-app-header-deprecated/index.d.ts

@@ -0,0 +1,149 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot title - Slot for the main title
+ * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
+ * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
+ * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
+ * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
+ * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
+ * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
+ * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
+ * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
+ * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
+ * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
+ * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
+ * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
+ * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
+ * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
+ * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
+ * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
+ * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
+ * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+ * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+ * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+ * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+ * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+ * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+ * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
+ * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
+ * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
+ * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
+ * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
+ * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
+ * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
+ * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
+ * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
+ * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
+ * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
+ * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+ * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+ * @cssprop --app-header-height - Defaults to `auto`.
+ * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+ * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
+ * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
+ * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
+ * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
+ * Defaults to `--app-header-typography-3-size`.
+ * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
+ * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-lineheight`.
+ * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
+ * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
+ * Defaults to `--app-header-typography-3-tracking`.
+ * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
+ */
+export declare class ZAppHeaderDeprecated {
+    hostElement: HTMLZAppHeaderDeprecatedElement;
+    /**
+     * Stuck mode for the header.
+     * You can programmatically set it using an IntersectionObserver.
+     */
+    stuck: boolean;
+    /**
+     * Set the hero image source for the header.
+     * You can also use a [slot="hero"] node for advanced customization.
+     */
+    hero: string;
+    /**
+     * Should place an overlay over the hero image.
+     * Useful for legibility purpose.
+     */
+    overlay: boolean;
+    /**
+     * Control menu bar position in the header.
+     * - auto: the menu bar is positioned near the title
+     * - stack: the menu bar is positioned below the title
+     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+     */
+    flow: "auto" | "stack" | "offcanvas";
+    /**
+     * The opening state of the drawer.
+     */
+    drawerOpen: boolean;
+    /**
+     * Enable the search bar.
+     */
+    enableSearch: boolean;
+    /**
+     * Placeholder text for the search bar.
+     */
+    searchPlaceholder: string;
+    /**
+     * Search string for the search bar.
+     */
+    searchString: string;
+    /**
+     * Url to the search page.
+     * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.
+     * The link will also appear on the sticky header.
+     */
+    searchPageUrl: string;
+    /**
+     * The stuck state of the bar.
+     */
+    private _stuck;
+    /**
+     * Current viewport.
+     * Used to change the aspect of the search button (icon only) on mobile and tablet.
+     */
+    private currentViewport;
+    /**
+     * Current count of menu items.
+     */
+    menuLength: number;
+    /**
+     * Emitted when the `stuck` state of the header changes
+     */
+    sticking: EventEmitter;
+    private container?;
+    private menuElements?;
+    private observer?;
+    constructor();
+    evaluateViewport(): void;
+    onStuck(): void;
+    setMenuFloatingMode(): void;
+    private get title();
+    private get scrollParent();
+    private get canShowMenu();
+    private get canShowSearchbar();
+    /**
+     * Whether the header has a hero image, either as a prop or as a slot.
+     */
+    private get hasHero();
+    private openDrawer;
+    private closeDrawer;
+    private collectMenuElements;
+    private enableStuckObserver;
+    private disableStuckMode;
+    onStuckMode(): void;
+    private renderSearchLinkButton;
+    private renderSeachbar;
+    componentDidLoad(): void;
+    render(): HTMLZAppHeaderElement;
+}

package/dist/types/components/deprecated/z-app-header-deprecated/index.stories.d.ts

@@ -0,0 +1,118 @@
+import { type TemplateResult } from "lit";
+import { ZAppHeaderDeprecated } from ".";
+import { CSSVarsArguments } from "../../../utils/storybook-utils";
+import "../z-menu-deprecated/index";
+import "../z-menu-section-deprecated/index";
+import "./index";
+import "./index.stories.css";
+type ZAppHeaderDeprecatedStoriesArgs = ZAppHeaderDeprecated & CSSVarsArguments<"app-header-content-max-width">;
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        flow: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        "--app-header-content-max-width": string;
+        enableSearch: false;
+        searchPageUrl: string;
+        flow: "auto";
+    };
+};
+export default StoryMeta;
+export declare const Title: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const Subtitle: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const TopSubtitle: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const Menu: {
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const LongTitle: {
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const VeryLongMenu: {
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const OffcanvasMenu: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const Stuck: {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    parameters: {
+        docs: {
+            inlineStories: boolean;
+            iframeHeight: string;
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const MaxWidth: {
+    args: {
+        "--app-header-content-max-width": string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    parameters: {
+        docs: {
+            inlineStories: boolean;
+            iframeHeight: string;
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const CoverHeroWithSlottedImage: {
+    args: {
+        overlay: true;
+        hero: string;
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const Searchbar: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};
+export declare const SearchPageButton: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/web-components").WebComponentsRenderer, ZAppHeaderDeprecatedStoriesArgs>) => TemplateResult<1>)[];
+    render: (args: ZAppHeaderDeprecatedStoriesArgs) => TemplateResult<1>;
+};

package/dist/types/components/deprecated/z-menu-deprecated/index.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot - Menu label
+ * @slot header - Header to display as the first entry of the open menu.
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
+ * @cssprop --z-menu-label-color - Color of the label's text.
+ */
+export declare class ZMenuDeprecated {
+    hostElement: HTMLZMenuDeprecatedElement;
+    /** Flag to set the active status of the menu. */
+    active?: boolean;
+    /**
+     * Flag to set the display mode of the list.
+     * If true, the list will be absolutely positioned under the menu label,
+     * stacked beneath it otherwise.
+     */
+    floating?: boolean;
+    /** The opening state of the menu. */
+    open: boolean;
+    /**
+     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+     * A small border is placed under it as a separator from other elements.
+     */
+    verticalContext: boolean;
+    hasHeader: boolean;
+    hasContent: boolean;
+    private content;
+    /** Animation frame request id. */
+    private raf;
+    /** The menu has been opened. */
+    opened: EventEmitter;
+    /** The menu has been closed. */
+    closed: EventEmitter;
+    private toggle;
+    /** Close the floating list when a click is performed outside of this Element. */
+    handleClick(ev: MouseEvent): void;
+    onOpenChanged(): void;
+    constructor();
+    componentWillLoad(): void;
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    private onLabelSlotChange;
+    /**
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
+     */
+    private reflow;
+    /**
+     * Check if some content slot is set.
+     */
+    private checkContent;
+    /**
+     * Set `menuitem` role to all menu items.
+     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+     */
+    private onItemsChange;
+    private renderMenuLabel;
+    render(): HTMLZMenuElement;
+}

package/dist/types/components/deprecated/z-menu-deprecated/index.stories.d.ts

@@ -0,0 +1,27 @@
+import { type ZMenuDeprecated } from ".";
+import "../z-menu-section-deprecated/index";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        active: false;
+        floating: true;
+        verticalContext: false;
+    };
+};
+export default StoryMeta;
+export declare const FloatingContentLayout: {
+    render: (args: ZMenuDeprecated) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithHeader: {
+    render: (args: ZMenuDeprecated) => import("lit-html").TemplateResult<1>;
+};
+export declare const ActiveWithoutItems: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZMenuDeprecated) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/deprecated/z-menu-section-deprecated/index.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * 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 declare class ZMenuSectionDeprecated {
+    hostElement: HTMLZMenuSectionDeprecatedElement;
+    /** Active state */
+    active?: boolean;
+    open: boolean;
+    hasContent: boolean;
+    /** The section has been opened. */
+    opened: EventEmitter;
+    /** The section has been closed. */
+    closed: EventEmitter;
+    private toggle;
+    /** Close the list when a click is performed outside of this Element. */
+    handleClick(ev: MouseEvent): void;
+    /**
+     * Check if some content slot is set.
+     */
+    private checkContent;
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    private onLabelSlotChange;
+    componentWillLoad(): void;
+    render(): HTMLZMenuSectionElement;
+}

package/dist/types/components/deprecated/z-menu-section-deprecated/index.stories.d.ts

@@ -0,0 +1,16 @@
+import { type ZMenuSectionDeprecated } from ".";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    args: {
+        active: false;
+    };
+};
+export default StoryMeta;
+export declare const WithItems: {
+    render: (args: ZMenuSectionDeprecated) => import("lit-html").TemplateResult<1>;
+};
+export declare const WithoutItems: {
+    render: (args: ZMenuSectionDeprecated) => import("lit-html").TemplateResult<1>;
+};