@zanichelli/albe-web-components 10.0.8 → 11.0.1

package/dist/esm/z-navigation-tabs.entry.js

@@ -1,11 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize, g as KeyboardCode, b as NavigationTabsKeyboardEvents } from './index-03c8b0f0.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents, g as KeyboardCode } from './index-03c8b0f0.js';
 
-const stylesCss = ":host{--z-navigation-tabs-nav-buttons-bg:var(--color-white);--z-navigation-tabs-nav-buttons-fg:var(--color-primary01);position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--z-navigation-tabs-nav-buttons-bg);border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg);outline:none}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
+const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
 
 const ZNavigationTabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.selected = createEvent(this, "selected", 7);
     /**
      * Navigation tabs orientation.
      */
@@ -14,6 +15,14 @@ const ZNavigationTabs = class {
      * Navigation tabs size.
      */
     this.size = NavigationTabsSize.BIG;
+    /**
+     * Index of the selected tab.
+     */
+    this.selectedTab = undefined;
+    /**
+     * Index of the last tab that held focus.
+     */
+    this.focusedTab = 0;
   }
   /**
    * Getter for the direction to check based on current orientation.
@@ -28,158 +37,161 @@ const ZNavigationTabs = class {
     return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
   }
   get tabs() {
-    return Array.from(this.host.children);
+    return Array.from(this.nav.children);
   }
   /**
-   * Set the `size` prop to all `z-navigation-tab` children.
+   * Scroll into view to center the tab.
    */
-  setChildrenSize() {
-    this.tabs.forEach((tab) => {
-      tab.size = this.size;
+  scrollToTab(tabElement) {
+    const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" });
+    tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  /**
+   * Scroll the navigation bar half of its size backward.
+   */
+  navigateBackwards() {
+    this.nav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
     });
   }
   /**
-   * Set the `orientation` prop to all `z-navigation-tab` children.
+   * Scroll the navigation bar half of its size forward.
    */
-  setChildrenOrientation() {
-    this.tabs.forEach((tab) => {
-      tab.orientation = this.orientation;
+  navigateForward() {
+    this.nav.scrollBy({
+      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
     });
   }
   /**
-   * Check if the navigation buttons are needed on window resize.
+   * Check if a keyboard event was triggered by an arrow key.
    */
-  checkScrollVisible() {
-    if (!this.tabsNav) {
-      return;
-    }
-    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
+  isArrowNavigation(e) {
+    return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
   }
   /**
    * Check if navigation buttons can be enabled for each direction.
    */
   checkScrollEnabled() {
-    if (!this.tabsNav) {
+    if (!this.nav) {
       return;
     }
     this.canNavigateNext =
-      this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] <
-        this.tabsNav[`scroll${this.dimension}`];
-    this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
+      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
+    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
   }
   /**
-   * Listen for child tab selection.
-   * Deselect all other previously selected tabs,
-   * then scroll to the new selected tab and center it.
-   * @param {CustomEvent} event `selected` event triggered by a child tab
+   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
    */
-  onTabSelected(event) {
-    const selectedTab = event.target;
+  onTabSelected() {
     this.tabs.forEach((tab, i) => {
-      if (tab !== selectedTab) {
-        tab.selected = undefined;
-      }
-      else {
-        this.tabFocus = i;
+      const zicon = tab.querySelector("z-icon");
+      const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.getAttribute("name").replace("-filled", "");
+      if (i !== this.selectedTab) {
+        tab.setAttribute("aria-selected", "false");
+        tab.tabIndex = -1;
+        zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", strokeIcon);
+        return;
       }
+      zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", `${strokeIcon}-filled`);
+      tab.tabIndex = 0;
+      tab.setAttribute("aria-selected", "true");
     });
+    this.scrollToTab(this.tabs[this.selectedTab]);
+    this.selected.emit(this.selectedTab);
   }
   /**
-   * Scroll the navigation bar half of its size backward.
+   * Check if the navigation buttons are needed on window resize.
    */
-  navigateBackwards() {
-    this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 - this.tabsNav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
-    });
+  checkScrollVisible() {
+    if (!this.nav) {
+      return;
+    }
+    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
   }
   /**
-   * Scroll the navigation bar half of its size forward.
+   * Handle click on the tabs.
+   * @param event `click` event triggered by a child tab
    */
-  navigateForward() {
-    this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] + this.tabsNav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
-    });
+  handleTabClick(event) {
+    const clickedTab = event.target.closest("[role='tab']");
+    if (!this.tabs.some((child) => child.contains(clickedTab))) {
+      return;
+    }
+    this.selectedTab = this.tabs.indexOf(clickedTab);
   }
   /**
-   * Move focus through tabs using keyboard arrows.
-   * When `TAB` is pressed, focus the currently selected tab, if any.
+   * Move focus through tabs when an arrow key is pressed.
+   * When `TAB` is pressed, focus the currently selected tab if any.
    */
-  navigateThroughTabs(e) {
-    const tabs = this.tabs;
-    if (e.key === KeyboardCode.TAB) {
-      tabs.forEach((tab, i) => {
-        if (tab.selected && tabs.some((tab) => tab === e.target)) {
-          this.tabFocus = i;
-        }
-      });
-      tabs[this.tabFocus].children[0].tabIndex = 0;
-      tabs[this.tabFocus].children[0].focus();
+  navigateThroughTabs(event) {
+    if (!this.tabs.some((tab) => tab.contains(event.target))) {
+      return true;
+    }
+    if (event.key === KeyboardCode.TAB) {
+      this.focusedTab = this.selectedTab || 0;
+      this.tabs[this.focusedTab].focus({ preventScroll: true });
       return;
     }
-    if (!this.isArrowNavigation(e)) {
+    if (!this.isArrowNavigation(event)) {
       return true;
     }
-    e.preventDefault();
-    tabs[this.tabFocus].children[0].tabIndex = -1;
-    // Move forward
-    if ((e.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-      (e.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-      this.tabFocus++;
-      if (this.tabFocus >= tabs.length) {
-        this.tabFocus = 0;
+    event.preventDefault();
+    this.tabs[this.focusedTab].tabIndex = -1;
+    if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+      // Move forward
+      this.focusedTab++;
+      if (this.focusedTab >= this.tabs.length) {
+        this.focusedTab = 0;
       }
-      // Move backward
     }
-    else if ((e.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-      (e.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-      this.tabFocus--;
-      if (this.tabFocus < 0) {
-        this.tabFocus = tabs.length - 1;
+    else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+      // Move backward
+      this.focusedTab--;
+      if (this.focusedTab < 0) {
+        this.focusedTab = this.tabs.length - 1;
       }
     }
-    // ignore disabled tabs
-    if (tabs[this.tabFocus].disabled) {
-      this.navigateThroughTabs(e);
-    }
-    else {
-      tabs[this.tabFocus].children[0].tabIndex = 0;
-      tabs[this.tabFocus].children[0].focus();
+    // Ignore disabled tabs
+    if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
+      this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
+      return this.navigateThroughTabs(event);
     }
-  }
-  /**
-   * Check if a keyboard event was triggered by an arrow key.
-   */
-  isArrowNavigation(e) {
-    return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
+    this.tabs[this.focusedTab].tabIndex = 0;
+    this.tabs[this.focusedTab].focus();
+    this.scrollToTab(this.tabs[this.focusedTab]);
   }
   componentDidRender() {
-    this.setChildrenSize();
-    this.setChildrenOrientation();
     this.checkScrollVisible();
-    const tabActive = this.tabs.findIndex((tab) => tab.ariaSelected === "true");
-    if ((!this.tabFocus && tabActive < 0) || this.tabFocus === undefined) {
-      this.tabFocus = tabActive >= 0 ? tabActive : 0;
-      const tabChild = this.tabs[this.tabFocus].children[0];
-      if (tabChild) {
-        tabChild.tabIndex = 0;
-      }
+  }
+  componentDidLoad() {
+    // Set role and tabindex to each slotted tab
+    this.tabs.forEach((tab) => {
+      tab.setAttribute("role", "tab");
+      tab.tabIndex = -1;
+    });
+    this.tabs[0].tabIndex = 0;
+    if (this.selectedTab !== undefined) {
+      this.onTabSelected();
     }
   }
   render() {
     return (h(Host, { class: {
         "interactive-2": this.size === NavigationTabsSize.SMALL,
         "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
         this.navigateThroughTabs(e);
       }, tabindex: "-1", disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "size": ["setChildrenSize"],
-    "orientation": ["setChildrenOrientation"],
-    "canNavigate": ["checkScrollEnabled"]
+    "canNavigate": ["checkScrollEnabled"],
+    "selectedTab": ["onTabSelected"]
   }; }
 };
 ZNavigationTabs.style = stylesCss;

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

@@ -126,7 +126,7 @@ const ZPopover = class {
     }
     if (!e.composedPath().includes(this.host)) {
       const target = e.target;
-      const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
+      const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(CSS.escape(this.bindTo));
       if (triggerElemClicked) {
         e.stopPropagation();
       }
@@ -170,7 +170,7 @@ const ZPopover = class {
   setPosition() {
     let element;
     if (typeof this.bindTo === "string") {
-      element = this.host.ownerDocument.querySelector(this.bindTo);
+      element = this.host.ownerDocument.querySelector(CSS.escape(this.bindTo));
     }
     else if (this.bindTo) {
       element = this.bindTo;

package/dist/esm/z-range-picker.entry.js

@@ -11,6 +11,14 @@ const ZRangePicker = class {
     this.dateSelect = createEvent(this, "dateSelect", 7);
     /** [Optional] datepicker mode: date or datetime */
     this.mode = ZRangePickerMode.DATE;
+    /** readonly mode */
+    this.firstPickerReadOnly = false;
+    /** readonly mode */
+    this.lastPickerReadOnly = false;
+    /** readonly mode */
+    this.firstPickerPlaceholder = "";
+    /** readonly mode */
+    this.lastPickerPlaceholder = "";
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.activeInput = "start-input";
     this.firstInputError = false;
@@ -56,6 +64,14 @@ const ZRangePicker = class {
   componentDidLoad() {
     this.setupPickers();
   }
+  setupFirstPickersReadOnly() {
+    var _a;
+    (_a = this.firstPicker) === null || _a === void 0 ? void 0 : _a.set("clickOpens", !this.firstPickerReadOnly);
+  }
+  setupLastPickersReadOnly() {
+    var _a;
+    (_a = this.lastPicker) === null || _a === void 0 ? void 0 : _a.set("clickOpens", !this.lastPickerReadOnly);
+  }
   setupPickers() {
     const config = {
       enableTime: this.mode === ZRangePickerMode.DATE_TIME,
@@ -109,8 +125,8 @@ const ZRangePicker = class {
         setAriaOptions(this.element, this.mode);
       },
     };
-    this.firstPicker = flatpickr(`.${this.rangePickerId}-1-container`, Object.assign(Object.assign({}, config), { mode: "single", appendTo: this.element.querySelector(`.${this.rangePickerId}-1-wrapper`) }));
-    this.lastPicker = flatpickr(`.${this.rangePickerId}-2-container`, Object.assign(Object.assign({}, config), { mode: "single", appendTo: this.element.querySelector(`.${this.rangePickerId}-2-wrapper`) }));
+    this.firstPicker = flatpickr(`.${this.rangePickerId}-1-container`, Object.assign(Object.assign({}, Object.assign(Object.assign({}, config), { clickOpens: !this.firstPickerReadOnly })), { mode: "single", appendTo: this.element.querySelector(`.${this.rangePickerId}-1-wrapper`) }));
+    this.lastPicker = flatpickr(`.${this.rangePickerId}-2-container`, Object.assign(Object.assign({}, Object.assign(Object.assign({}, config), { clickOpens: !this.lastPickerReadOnly })), { mode: "single", appendTo: this.element.querySelector(`.${this.rangePickerId}-2-wrapper`) }));
     this.element.querySelectorAll(".flatpickr-weekday").forEach((element) => {
       element.innerHTML = element.innerHTML.trim().charAt(0);
     });
@@ -323,14 +339,16 @@ const ZRangePicker = class {
         [this.mode]: true,
         [this.activeInput]: true,
         [this.flatpickrPosition]: true,
-      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
+      } }, h("div", { class: `${this.rangePickerId}-1-wrapper` }, h("div", { class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({}, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
         this.firstInputError = false;
-      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
+      } })))), h("div", { class: `${this.rangePickerId}-2-wrapper` }, h("div", { class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({}, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
         this.lastInputError = false;
       } }))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "firstPickerReadOnly": ["setupFirstPickersReadOnly"],
+    "lastPickerReadOnly": ["setupLastPickersReadOnly"],
     "mode": ["setupPickers"]
   }; }
 };

package/dist/types/components/date-picker/z-range-picker/index.d.ts

@@ -14,6 +14,14 @@ export declare class ZRangePicker {
   secondLabel?: string;
   /** [Optional] datepicker mode: date or datetime */
   mode: ZRangePickerMode;
+  /** readonly mode */
+  firstPickerReadOnly: boolean;
+  /** readonly mode */
+  lastPickerReadOnly: boolean;
+  /** readonly mode */
+  firstPickerPlaceholder: string;
+  /** readonly mode */
+  lastPickerPlaceholder: string;
   flatpickrPosition: ZDatePickerPosition;
   activeInput: string;
   firstInputError: boolean;
@@ -25,6 +33,8 @@ export declare class ZRangePicker {
   handleClick(): void;
   handleKeyDown(ev: KeyboardEvent): void;
   componentDidLoad(): void;
+  setupFirstPickersReadOnly(): void;
+  setupLastPickersReadOnly(): void;
   setupPickers(): void;
   private onDateSelect;
   private disableDates;

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

@@ -1,7 +1,8 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
 /**
  * @slot title - Slot for the main title
- * @slot subtitle - Slot for the subtitle. It will not appear in stuck header.
+ * @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`.

package/dist/types/components/navigation/{tabs/z-navigation-tabs → z-navigation-tabs}/index.d.ts

@@ -1,13 +1,15 @@
-import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans";
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { NavigationTabsSize, NavigationTabsOrientation } from "../../../beans";
 /**
  * Navigation tabs component.
- * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
+ * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
+ * @slot - Main slot. Use `<button>` or `<a>` tags as children.
  * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
  * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export declare class ZNavigationTabs {
   /**
-   * Set aria-label attribute in tablist role.
+   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
    */
   ariaLabel?: string;
   /**
@@ -18,24 +20,35 @@ export declare class ZNavigationTabs {
    * Navigation tabs size.
    */
   size?: NavigationTabsSize;
+  /**
+   * Index of the selected tab.
+   */
+  selectedTab: number;
+  /**
+   * Emitted when the selected tab changes.
+   */
+  selected: EventEmitter<number>;
   /**
    * Whether to show navigation buttons.
    */
   canNavigate: boolean;
   /**
-   * Whether backwards navigation is enabled.
+   * Whether backwards navigation is allowed.
    */
   canNavigatePrev: boolean;
   /**
-   * Whether forward navigation is enabled.
+   * Whether forward navigation is allowed.
    */
   canNavigateNext: boolean;
+  host: HTMLZNavigationTabsElement;
   /**
-   * tab focus index.
+   * Index of the last tab that held focus.
    */
-  tabFocus: number;
-  host: HTMLZNavigationTabsElement;
-  private tabsNav;
+  private focusedTab;
+  /**
+   * Reference to the `<nav>` element
+   */
+  private nav;
   /**
    * Getter for the direction to check based on current orientation.
    */
@@ -44,47 +57,46 @@ export declare class ZNavigationTabs {
    * Getter for the dimension to check based on current orientation.
    */
   get dimension(): string;
-  get tabs(): (HTMLZNavigationTabElement | HTMLZNavigationTabLinkElement)[];
+  get tabs(): HTMLElement[];
   /**
-   * Set the `size` prop to all `z-navigation-tab` children.
+   * Scroll into view to center the tab.
    */
-  setChildrenSize(): void;
+  private scrollToTab;
   /**
-   * Set the `orientation` prop to all `z-navigation-tab` children.
+   * Scroll the navigation bar half of its size backward.
    */
-  setChildrenOrientation(): void;
+  private navigateBackwards;
   /**
-   * Check if the navigation buttons are needed on window resize.
+   * Scroll the navigation bar half of its size forward.
    */
-  checkScrollVisible(): void;
+  private navigateForward;
+  /**
+   * Check if a keyboard event was triggered by an arrow key.
+   */
+  private isArrowNavigation;
   /**
    * Check if navigation buttons can be enabled for each direction.
    */
   checkScrollEnabled(): void;
   /**
-   * Listen for child tab selection.
-   * Deselect all other previously selected tabs,
-   * then scroll to the new selected tab and center it.
-   * @param {CustomEvent} event `selected` event triggered by a child tab
+   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
    */
-  onTabSelected(event: CustomEvent): void;
+  onTabSelected(): void;
   /**
-   * Scroll the navigation bar half of its size backward.
+   * Check if the navigation buttons are needed on window resize.
    */
-  private navigateBackwards;
+  checkScrollVisible(): void;
   /**
-   * Scroll the navigation bar half of its size forward.
+   * Handle click on the tabs.
+   * @param event `click` event triggered by a child tab
    */
-  private navigateForward;
+  handleTabClick(event: MouseEvent): void;
   /**
-   * Move focus through tabs using keyboard arrows.
-   * When `TAB` is pressed, focus the currently selected tab, if any.
+   * Move focus through tabs when an arrow key is pressed.
+   * When `TAB` is pressed, focus the currently selected tab if any.
    */
   private navigateThroughTabs;
-  /**
-   * Check if a keyboard event was triggered by an arrow key.
-   */
-  private isArrowNavigation;
   componentDidRender(): void;
+  componentDidLoad(): void;
   render(): HTMLZNavigationTabsElement;
 }