@zanichelli/albe-web-components 2.48.0 → 3.1.0

package/dist/collection/components/navigation/tabs/z-navigation-tab/index.js

@@ -1,9 +1,8 @@
-import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
+import { Component, Prop, h, Listen, Event, Watch } from "@stencil/core";
 import { NavigationTabsOrientations, NavigationTabsSizes } from "../../../../beans";
 import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders a button.
- * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
  */
 export class ZNavigationTab {
   constructor() {
@@ -24,12 +23,14 @@ export class ZNavigationTab {
      */
     this.size = NavigationTabsSizes.big;
   }
-  onFocus() {
-    this.host.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "nearest",
-    });
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
     if (!this.disabled) {
@@ -38,7 +39,7 @@ export class ZNavigationTab {
   }
   onSelected() {
     if (this.selected) {
-      this.emitSelected.emit();
+      this.selectedEvent.emit();
     }
   }
   /**
@@ -55,12 +56,11 @@ export class ZNavigationTab {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle },
-      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) },
+      this.icon && this.renderIcon(),
       this.orientation === "horizontal" && this.label));
   }
   static get is() { return "z-navigation-tab"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["../navigation-tab.css"]
   }; }
@@ -162,7 +162,7 @@ export class ZNavigationTab {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
       },
       "attribute": "icon",
       "reflect": false
@@ -203,7 +203,7 @@ export class ZNavigationTab {
     }
   }; }
   static get events() { return [{
-      "method": "emitSelected",
+      "method": "selectedEvent",
       "name": "selected",
       "bubbles": true,
       "cancelable": true,
@@ -218,18 +218,11 @@ export class ZNavigationTab {
         "references": {}
       }
     }]; }
-  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "selected",
       "methodName": "onSelected"
     }]; }
   static get listeners() { return [{
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "click",
       "method": "onClick",
       "target": undefined,

package/dist/collection/components/navigation/tabs/z-navigation-tab-link/index.js

@@ -1,9 +1,8 @@
-import { Component, Prop, h, Element, Listen, Event, Watch, } from "@stencil/core";
+import { Component, Prop, h, Listen, Event, Watch, } from "@stencil/core";
 import { NavigationTabsOrientations, NavigationTabsSizes, } from "../../../../beans";
 import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
- * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
  */
 export class ZNavigationTabLink {
   constructor() {
@@ -24,19 +23,21 @@ export class ZNavigationTabLink {
      */
     this.size = NavigationTabsSizes.big;
   }
-  onFocus() {
-    this.host.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "nearest",
-    });
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
     this.selected = true;
   }
   onSelected() {
     if (this.selected) {
-      this.emitSelected.emit();
+      this.selectedEvent.emit();
     }
   }
   /**
@@ -53,12 +54,11 @@ export class ZNavigationTabLink {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target },
-      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this) },
+      this.icon && this.renderIcon(),
       this.orientation === "horizontal" && this.label));
   }
   static get is() { return "z-navigation-tab-link"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["../navigation-tab.css"]
   }; }
@@ -211,7 +211,7 @@ export class ZNavigationTabLink {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
       },
       "attribute": "icon",
       "reflect": false
@@ -235,7 +235,7 @@ export class ZNavigationTabLink {
     }
   }; }
   static get events() { return [{
-      "method": "emitSelected",
+      "method": "selectedEvent",
       "name": "selected",
       "bubbles": true,
       "cancelable": true,
@@ -250,18 +250,11 @@ export class ZNavigationTabLink {
         "references": {}
       }
     }]; }
-  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "selected",
       "methodName": "onSelected"
     }]; }
   static get listeners() { return [{
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "click",
       "method": "onClick",
       "target": undefined,

package/dist/collection/components/navigation/tabs/z-navigation-tabs/index.js

@@ -67,6 +67,8 @@ export class ZNavigationTabs {
   }
   /**
    * 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
    */
   onTabSelected(event) {
@@ -82,11 +84,8 @@ export class ZNavigationTabs {
    * Scroll the navigation bar half of its size backward.
    */
   navigateBackwards() {
-    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 -
-        (this.tabsNav[`client${this.dimension}`] / 2) -
-        safeScrollAreaSize,
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
       behavior: 'smooth',
     });
   }
@@ -94,11 +93,9 @@ export class ZNavigationTabs {
    * Scroll the navigation bar half of its size forward.
    */
   navigateForward() {
-    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
     this.tabsNav.scrollBy({
       [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
-        (this.tabsNav[`client${this.dimension}`] / 2) +
-        safeScrollAreaSize,
+        (this.tabsNav[`client${this.dimension}`] / 2),
       behavior: 'smooth',
     });
   }

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

@@ -1,13 +1,8 @@
 :host {
-  --safe-scroll-area: 4px;
-  --negative-safe-scroll-area: calc(-1 * var(--safe-scroll-area));
-
   position: relative;
   display: flex;
   flex-direction: row;
   z-index: 0;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   overflow: hidden;
@@ -37,11 +32,12 @@
   border-radius: var(--border-no-radius);
   cursor: pointer;
   z-index: 1;
+  box-shadow: 0px 0px 4px 1px rgb(66, 69, 72, 0.40);
 }
 
-.navigation-button:focus {
+.navigation-button:focus:focus-visible {
   fill: var(--color-primary01);
-  box-shadow: var(--shadow-focus-primary);
+  box-shadow: inset var(--shadow-focus-primary);
 }
 
 .navigation-button:disabled {
@@ -53,9 +49,7 @@ nav {
   align-items: center;
   justify-content: flex-start;
   overflow: auto;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
-  scroll-padding: var(--safe-scroll-area);
+  scroll-behavior: smooth;
 
   /* hide scrollbar in Firefox */
   scrollbar-width: none;
@@ -68,19 +62,15 @@ nav {
 :host([orientation='horizontal']) .navigation-button {
   top: 0;
   height: 100%;
-  width: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
+  width: calc(var(--space-unit) * 4);
 }
 
 :host([orientation='horizontal']) .navigation-button:first-child {
   left: 0;
-  padding-left: var(--safe-scroll-area);
-  box-shadow: 5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([orientation='horizontal']) .navigation-button:last-child {
   right: 0;
-  padding-right: 4px;
-  box-shadow: -5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 /* Orientation vertical */
@@ -98,19 +88,15 @@ nav {
 :host([orientation='vertical']) .navigation-button {
   left: 0;
   width: 100%;
-  height: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
+  height: calc(var(--space-unit) * 4);
 }
 
 :host([orientation='vertical']) .navigation-button:first-child {
   top: 0;
-  padding-top: var(--safe-scroll-area);
-  box-shadow: 0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([orientation='vertical']) .navigation-button:last-child {
   bottom: 0;
-  padding-bottom: var(--safe-scroll-area);
-  box-shadow: 0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([size='small'][orientation='vertical']) .navigation-button {

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

@@ -28,10 +28,10 @@ export class ZCookiebar {
             "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0",
             h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"),
             "."))),
-      h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+      h("z-button-deprecated", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+    return (h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
   }
   static get is() { return "z-cookiebar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/z-cookiebar/styles.css

@@ -15,7 +15,7 @@ z-candybar.hidden {
   align-items: stretch;
   align-content: space-between;
   color: var(--text-grey-800);
-  border-radius: calc(var(--space-unit) * .5);
+  border-radius: calc(var(--space-unit) * 0.5);
   font-size: 16px;
   letter-spacing: 0px;
   line-height: 24px;
@@ -58,7 +58,7 @@ z-candybar.hidden {
   z-index: 1000;
 }
 
-.content > z-button {
+.content > z-button-deprecated {
   margin: 0;
   width: 100%;
 }
@@ -87,7 +87,7 @@ z-candybar.hidden {
     padding: 0;
   }
 
-  .content > z-button {
+  .content > z-button-deprecated {
     margin: 0;
     width: initial;
   }

package/dist/collection/components/notification/z-toast-notification/styles.css

@@ -172,7 +172,10 @@
   font-weight: 600;
 }
 
-:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+:host
+  > #external-container.mobile-wrapped
+  #button
+  ::slotted(z-button-deprecated) {
   margin-top: calc(var(--space-unit) * 2);
 }
 
@@ -219,7 +222,6 @@
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-
   :host {
     width: unset;
     max-width: 50vw;

package/dist/collection/components/z-date-picker/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Event, State, } from "@stencil/core";
+import { Component, Prop, Element, h, Event, Listen, State, } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
@@ -13,16 +13,55 @@ export class ZDatePicker {
   emitDateSelect(date) {
     this.dateSelect.emit(date);
   }
+  handleKeyDown(ev) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      let isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
+      let isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
+      let arrowPressed = isPrevArrowEntered || isNextArrowEntered;
+      arrowPressed && ev.key === " " && ev.preventDefault();
+      if (this.mode === ZDatePickerMode.months) {
+        isPrevArrowEntered &&
+          this.flatpickrInstance.changeYear(this.flatpickrInstance.currentYear - 1);
+        isNextArrowEntered &&
+          this.flatpickrInstance.changeYear(this.flatpickrInstance.currentYear + 1);
+        if (arrowPressed) {
+          let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
+          let months = calendar.querySelectorAll(".flatpickr-monthSelect-month");
+          months.forEach((element) => {
+            element.setAttribute("aria-label", `${element.innerHTML} ${this.flatpickrInstance.currentYear}`);
+          });
+          //Force check of the current day
+          Array.from(months).forEach((element, index) => {
+            let curMonth = new Date().getMonth();
+            let curYear = new Date().getFullYear();
+            if (index === curMonth) {
+              if (this.flatpickrInstance.currentYear === curYear) {
+                element.setAttribute("class", "flatpickr-monthSelect-month today");
+              }
+              else {
+                element.setAttribute("class", "flatpickr-monthSelect-month");
+              }
+            }
+          });
+        }
+      }
+      else {
+        isPrevArrowEntered && this.flatpickrInstance.changeMonth(-1);
+        isNextArrowEntered && this.flatpickrInstance.changeMonth(1);
+      }
+    }
+  }
   componentWillLoad() {
     let customToggle = this.element.querySelector("[slot=toggle]");
     this.hasChildren = !!customToggle;
     this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
   }
   componentDidLoad() {
-    flatpickr(`.${this.datepickerid}`, {
+    this.flatpickrInstance = flatpickr(`.${this.datepickerid}`, {
       appendTo: this.element.children[0],
       enableTime: this.mode === ZDatePickerMode.dateTime,
       locale: Italian,
+      allowInput: true,
       dateFormat: this.mode === ZDatePickerMode.dateTime ? "d-m-Y - H:i" : "d-m-Y",
       ariaDateFormat: this.mode === ZDatePickerMode.months ? "F Y" : "d F Y",
       minuteIncrement: 1,
@@ -30,6 +69,13 @@ export class ZDatePicker {
       onChange: (_selectedDates, dateStr) => {
         this.emitDateSelect(dateStr);
       },
+      onOpen: () => {
+        this.setAriaOptions();
+        this.setFlatpickrPosition();
+      },
+      onKeyDown: () => {
+        this.setAriaOptions();
+      },
       wrap: this.hasChildren,
       plugins: this.mode === ZDatePickerMode.months && [
         monthSelectPlugin({
@@ -42,6 +88,60 @@ export class ZDatePicker {
       element.innerHTML = element.innerHTML.trim().charAt(0);
     });
   }
+  setAriaOptions() {
+    let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
+    let prevMonthArrow = calendar.getElementsByClassName("flatpickr-prev-month")[0];
+    let nextMonthArrow = calendar.getElementsByClassName("flatpickr-next-month")[0];
+    let tabindexElements = calendar.querySelectorAll('[tabindex = "-1"]');
+    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
+    prevMonthArrow.setAttribute("tabindex", "0");
+    nextMonthArrow.setAttribute("tabindex", "0");
+    prevMonthArrow.setAttribute("role", "button");
+    nextMonthArrow.setAttribute("role", "button");
+    calendar
+      .getElementsByClassName("cur-year")[0]
+      .setAttribute("aria-label", "Anno");
+    if (this.mode === ZDatePickerMode.months) {
+      this.setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+    if (this.mode === ZDatePickerMode.date) {
+      this.setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+    if (this.mode === ZDatePickerMode.dateTime) {
+      this.setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+  }
+  setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-month")).forEach((element) => element.setAttribute("role", "button"));
+    prevMonthArrow.setAttribute("aria-label", "Anno precedente");
+    nextMonthArrow.setAttribute("aria-label", "Anno successivo");
+  }
+  setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+    calendar
+      .getElementsByClassName("flatpickr-monthDropdown-months")[0]
+      .setAttribute("aria-label", "Mese");
+    prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+    nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+  }
+  setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+    calendar
+      .getElementsByClassName("flatpickr-monthDropdown-months")[0]
+      .setAttribute("aria-label", "Mese");
+    prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+    nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+    Array.from(calendar.getElementsByClassName("time24hr")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    calendar
+      .getElementsByClassName("flatpickr-hour")[0]
+      .setAttribute("aria-label", "Ora");
+    calendar
+      .getElementsByClassName("flatpickr-minute")[0]
+      .setAttribute("aria-label", "Minuti");
+  }
   setFlatpickrPosition() {
     const toggleHeight = this.element.children[0].clientHeight;
     this.element.style.setProperty("--toggle-height", `${toggleHeight}px`);
@@ -66,10 +166,10 @@ export class ZDatePicker {
       h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (h("z-input", { class: classNames(this.datepickerid), type: "text", name: "datepicker", icon: "event", hasmessage: false }));
+    return (h("z-input", { class: classNames(this.datepickerid), type: "text", icon: "event", hasmessage: false, tabindex: "0" }));
   }
   render() {
-    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode), onClick: () => this.setFlatpickrPosition() }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
+    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
   }
   static get is() { return "z-date-picker"; }
   static get originalStyleUrls() { return {
@@ -140,4 +240,11 @@ export class ZDatePicker {
       }
     }]; }
   static get elementRef() { return "element"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/z-date-picker/styles.css

@@ -257,11 +257,15 @@ z-date-picker > div > * {
 }
 
 .flatpickr-next-month:hover,
-.flatpickr-prev-month:hover {
+.flatpickr-prev-month:hover,
+.flatpickr-next-month:focus,
+.flatpickr-prev-month:focus {
   border-radius: var(--border-radius);
   background-color: var(--color-primary03) !important;
   border-color: var(--color-primary03) !important;
   color: var(--color-hover-primary) !important;
+  border: none !important;
+  outline: none !important;
 }
 
 .flatpickr-next-month:hover svg,
@@ -296,7 +300,8 @@ z-date-picker > div > * {
   padding-left: var(--space-unit) !important;
 }
 
-.flatpickr-monthDropdown-months:hover {
+.flatpickr-monthDropdown-months:hover,
+.flatpickr-monthDropdown-months:focus {
   outline: 1px solid var(--color-primary01) !important;
 }
 
@@ -311,7 +316,8 @@ z-date-picker > div > * {
   width: calc(var(--space-unit) * 10);
 }
 
-.flatpickr-current-month > .numInputWrapper:hover {
+.flatpickr-current-month > .numInputWrapper:hover,
+.flatpickr-current-month > .numInputWrapper:focus-within {
   outline: 1px solid var(--color-primary01) !important;
 }
 
@@ -368,7 +374,8 @@ z-date-picker > div > * {
 .flatpickr-day:hover,
 .flatpickr-day.prevMonthDay:hover,
 .flatpickr-day.selected:hover,
-.flatpickr-monthSelect-month:hover {
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
   background-color: var(--myz-blue-dark) !important;
   border-color: var(--myz-blue-dark) !important;
   color: var(--color-white) !important;
@@ -441,6 +448,9 @@ z-date-picker > div > * {
 
 .flatpickr-minute,
 .flatpickr-hour {
+  font-size: var(--font-size-3) !important;
+  font-weight: var(--font-rg) !important;
+
   outline: 1px solid black !important;
 }
 

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

@@ -66,15 +66,15 @@ export class ZTable {
           h("div", { class: tableContentClass },
             h("slot", { name: "table-body" }),
             h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-              !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-              !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+              !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+              !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
     return (h(Host, null,
       h("div", { class: tableClass },
         h("slot", { name: "table-header" })),
       h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-        !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-        !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+        !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+        !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

package/dist/collection/components/z-table/z-table-cell/index.js

@@ -19,7 +19,7 @@ export class ZTableCell {
           visible: this.isMenuOpened,
         }) },
         h("div", { class: "button-content" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
           h("div", { class: classNames("contextual-menu-container", {
               visible: this.isMenuOpened,
             }) },

package/dist/collection/components/z-table/z-table-header/index.js

@@ -74,7 +74,7 @@ export class ZTableHeader {
           visible: this.isMenuOpened,
         }) },
         h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
           h("div", { slot: "popover" },
             h("slot", { name: "contextual-menu" })))))));
   }