@zanichelli/albe-web-components 2.48.0 → 3.1.0

package/dist/cjs/z-navigation-tab-link.cjs.entry.js

@@ -6,12 +6,12 @@ const index = require('./index-84b7063a.js');
 const index$1 = require('./index-b1289f95.js');
 const icons = require('./icons-30810e62.js');
 
-const navigationTabCss = ":host>button,:host>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}:host>a{text-decoration:none}:host *::before,:host *::after{box-sizing:border-box}:host(:not([disabled]):hover)>*,:host([selected])>*{color:var(--color-hover-secondary);fill:currentColor}:host(:not([disabled]):hover)>*::after,:host([selected])>*::after{content:'';position:absolute;background-color:var(--color-hover-secondary)}:host([orientation='horizontal']:not([disabled]):hover)>*::after,:host([orientation='horizontal'][selected])>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}slot[name=\"icon\"] z-icon,::slotted([slot=\"icon\"]){--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}:host([orientation='horizontal']) slot[name=\"icon\"] z-icon,:host([orientation='horizontal']) ::slotted([slot=\"icon\"]){margin-right:var(--space-unit)}:host(:not([disabled]):hover)>*{background-color:var(--color-background)}:host>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([disabled])>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}:host([size='small'])>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}:host([size='small'][orientation='horizontal'])>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}:host([size='small'][orientation='horizontal']:not([disabled]):hover)>*::after,:host([size='small'][orientation='horizontal'][selected])>*::after{height:var(--border-size-medium)}:host([size='small']:not([orientation='vertical'])) slot[name=\"icon\"] z-icon,:host([size='small']:not([orientation='vertical'])) ::slotted([slot=\"icon\"]){--z-icon-width:14px;--z-icon-height:14px}:host([orientation='vertical'])>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}:host([orientation='vertical']:hover:not([disabled]))>*::after,:host([orientation='vertical'][selected])>*::after{width:var(--border-size-large);height:100%;top:0;right:0}";
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentColor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{content:\"\";position:absolute;background-color:var(--color-hover-secondary)}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:hover:not([disabled])>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{width:var(--border-size-large);height:100%;top:0;right:0}";
 
 const ZNavigationTabLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.emitSelected = index.createEvent(this, "selected", 7);
+    this.selectedEvent = index.createEvent(this, "selected", 7);
     /**
      * Whether the tab is selected.
      */
@@ -29,19 +29,21 @@ const ZNavigationTabLink = class {
      */
     this.size = index$1.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 === index$1.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();
     }
   }
   /**
@@ -58,9 +60,8 @@ const ZNavigationTabLink = class {
     return index.h("z-icon", { name: icon });
   }
   render() {
-    return (index.h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target }, index.h("slot", { name: "icon" }, this.icon && this.renderIcon()), this.orientation === "horizontal" && this.label));
+    return (index.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));
   }
-  get host() { return index.getElement(this); }
   static get watchers() { return {
     "selected": ["onSelected"]
   }; }

package/dist/cjs/z-navigation-tab.cjs.entry.js

@@ -6,12 +6,12 @@ const index = require('./index-84b7063a.js');
 const index$1 = require('./index-b1289f95.js');
 const icons = require('./icons-30810e62.js');
 
-const navigationTabCss = ":host>button,:host>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}:host>a{text-decoration:none}:host *::before,:host *::after{box-sizing:border-box}:host(:not([disabled]):hover)>*,:host([selected])>*{color:var(--color-hover-secondary);fill:currentColor}:host(:not([disabled]):hover)>*::after,:host([selected])>*::after{content:'';position:absolute;background-color:var(--color-hover-secondary)}:host([orientation='horizontal']:not([disabled]):hover)>*::after,:host([orientation='horizontal'][selected])>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}slot[name=\"icon\"] z-icon,::slotted([slot=\"icon\"]){--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}:host([orientation='horizontal']) slot[name=\"icon\"] z-icon,:host([orientation='horizontal']) ::slotted([slot=\"icon\"]){margin-right:var(--space-unit)}:host(:not([disabled]):hover)>*{background-color:var(--color-background)}:host>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([disabled])>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}:host([size='small'])>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}:host([size='small'][orientation='horizontal'])>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}:host([size='small'][orientation='horizontal']:not([disabled]):hover)>*::after,:host([size='small'][orientation='horizontal'][selected])>*::after{height:var(--border-size-medium)}:host([size='small']:not([orientation='vertical'])) slot[name=\"icon\"] z-icon,:host([size='small']:not([orientation='vertical'])) ::slotted([slot=\"icon\"]){--z-icon-width:14px;--z-icon-height:14px}:host([orientation='vertical'])>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}:host([orientation='vertical']:hover:not([disabled]))>*::after,:host([orientation='vertical'][selected])>*::after{width:var(--border-size-large);height:100%;top:0;right:0}";
+const navigationTabCss = "z-navigation-tab>button,z-navigation-tab-link>a{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);background-color:unset;text-align:center;font-size:inherit;font-family:var(--font-family-sans);line-height:inherit;letter-spacing:inherit;white-space:nowrap;color:var(--color-primary01);fill:currentColor;border:none;border-radius:var(--border-no-radius);outline:none;cursor:pointer}z-navigation-tab-link>a{text-decoration:none}z-navigation-tab *,z-navigation-tab-link *,z-navigation-tab *::before,z-navigation-tab *::after,z-navigation-tab-link *::before,z-navigation-tab-link *::after{box-sizing:border-box}z-navigation-tab>*:focus:focus-visible,z-navigation-tab-link>*:focus:focus-visible{box-shadow:inset var(--shadow-focus-primary)}z-navigation-tab:not([disabled]):hover>*,z-navigation-tab[selected]>*,z-navigation-tab-link:not([disabled]):hover>*,z-navigation-tab-link[selected]>*{color:var(--color-hover-secondary);fill:currentColor}z-navigation-tab:not([disabled]):hover>*::after,z-navigation-tab[selected]>*::after,z-navigation-tab-link:not([disabled]):hover>*::after,z-navigation-tab-link[selected]>*::after{content:\"\";position:absolute;background-color:var(--color-hover-secondary)}z-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab-link[orientation=\"horizontal\"][selected]>*::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tab z-icon,z-navigation-tab-link z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tab[orientation=\"horizontal\"] z-icon,z-navigation-tab-link[orientation=\"horizontal\"] z-icon{margin-right:var(--space-unit)}z-navigation-tab:not([disabled]):hover>*{background-color:var(--color-background)}z-navigation-tab[disabled]>*{pointer-events:all;cursor:not-allowed;color:var(--gray500);fill:currentColor}z-navigation-tab[size=\"small\"]>*,z-navigation-tab-link[size=\"small\"]>*{font-size:var(--font-size-2);line-height:1.4;letter-spacing:0.16px}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]>*,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover>*::after,z-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected]>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:hover>*::after,z-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected]>*::after{height:var(--border-size-medium)}z-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,z-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tab[orientation=\"vertical\"]>*,z-navigation-tab-link[orientation=\"vertical\"]>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tab[orientation=\"vertical\"]:hover:not([disabled])>*::after,z-navigation-tab[orientation=\"vertical\"][selected]>*::after,z-navigation-tab-link[orientation=\"vertical\"]:hover>*::after,z-navigation-tab-link[orientation=\"vertical\"][selected]>*::after{width:var(--border-size-large);height:100%;top:0;right:0}";
 
 const ZNavigationTab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.emitSelected = index.createEvent(this, "selected", 7);
+    this.selectedEvent = index.createEvent(this, "selected", 7);
     /**
      * Whether the tab is selected.
      */
@@ -29,12 +29,14 @@ const ZNavigationTab = class {
      */
     this.size = index$1.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 === index$1.NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
     if (!this.disabled) {
@@ -43,7 +45,7 @@ const ZNavigationTab = class {
   }
   onSelected() {
     if (this.selected) {
-      this.emitSelected.emit();
+      this.selectedEvent.emit();
     }
   }
   /**
@@ -60,9 +62,8 @@ const ZNavigationTab = class {
     return index.h("z-icon", { name: icon });
   }
   render() {
-    return (index.h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle }, index.h("slot", { name: "icon" }, this.icon && this.renderIcon()), this.orientation === "horizontal" && this.label));
+    return (index.h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
   }
-  get host() { return index.getElement(this); }
   static get watchers() { return {
     "selected": ["onSelected"]
   }; }

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-84b7063a.js');
 const index$1 = require('./index-b1289f95.js');
 
-const stylesCss = ":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}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);border-radius:var(--border-no-radius);cursor:pointer;z-index:1}.navigation-button:focus{fill:var(--color-primary01);box-shadow:var(--shadow-focus-primary)}.navigation-button:disabled{display:none}nav{display:flex;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);scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) .navigation-button{top:0;height:100%;width:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}: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)}:host([orientation='vertical']){flex-direction:column;width:fit-content}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}:host([orientation='vertical']) .navigation-button{left:0;width:100%;height:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}: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{height:calc(var(--space-unit) * 4)}";
+const stylesCss = ":host{position:relative;display:flex;flex-direction:row;z-index:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);overflow:hidden}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);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:focus-visible{fill:var(--color-primary01);box-shadow:inset var(--shadow-focus-primary)}.navigation-button:disabled{display:none}nav{display:flex;align-items:center;justify-content:flex-start;overflow:auto;scroll-behavior:smooth;scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) .navigation-button{top:0;height:100%;width:calc(var(--space-unit) * 4)}:host([orientation='horizontal']) .navigation-button:first-child{left:0}:host([orientation='horizontal']) .navigation-button:last-child{right:0}:host([orientation='vertical']){flex-direction:column;width:fit-content}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}: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 ZNavigationTabs = class {
   constructor(hostRef) {
@@ -71,6 +71,8 @@ const ZNavigationTabs = class {
   }
   /**
    * 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) {
@@ -86,11 +88,8 @@ const ZNavigationTabs = class {
    * 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',
     });
   }
@@ -98,11 +97,9 @@ const ZNavigationTabs = class {
    * 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/cjs/z-table-cell.cjs.entry.js

@@ -25,7 +25,7 @@ const ZTableCell = class {
   render() {
     return (index.h(index.Host, null, this.showButton && (index.h("div", { class: index$2.classnames("button-container", {
         visible: this.isMenuOpened,
-      }) }, index.h("div", { class: "button-content" }, index.h("z-button", { icon: "contextual-menu", variant: index$1.ButtonVariantEnum.tertiary, size: index$1.ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }), index.h("div", { class: index$2.classnames("contextual-menu-container", {
+      }) }, index.h("div", { class: "button-content" }, index.h("z-button-deprecated", { icon: "contextual-menu", variant: index$1.ButtonVariantEnum.tertiary, size: index$1.ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }), index.h("div", { class: index$2.classnames("contextual-menu-container", {
         visible: this.isMenuOpened,
       }) }, index.h("slot", { name: "contextual-menu" }))))), index.h("slot", null)));
   }

package/dist/cjs/z-table-header.cjs.entry.js

@@ -79,7 +79,7 @@ const ZTableHeader = class {
         ? "arrow-up"
         : "arrow-down", class: "arrow" }))), this.showButton && (index.h("div", { class: index$2.classnames("popover-container", {
         visible: this.isMenuOpened,
-      }) }, index.h("z-popover", { position: index$1.PopoverPosition["below-center"], "background-color": "gray200" }, index.h("z-button", { icon: "contextual-menu", variant: index$1.ButtonVariantEnum["tertiary"], size: index$1.ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }), index.h("div", { slot: "popover" }, index.h("slot", { name: "contextual-menu" })))))));
+      }) }, index.h("z-popover", { position: index$1.PopoverPosition["below-center"], "background-color": "gray200" }, index.h("z-button-deprecated", { icon: "contextual-menu", variant: index$1.ButtonVariantEnum["tertiary"], size: index$1.ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }), index.h("div", { slot: "popover" }, index.h("slot", { name: "contextual-menu" })))))));
   }
   get host() { return index.getElement(this); }
 };

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

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

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

@@ -8,7 +8,7 @@ const breakpoints = require('./breakpoints-88c4fd6c.js');
 const hammer = require('./hammer-4f20813e.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const stylesCss = ":host{display:inline-block;min-width:200px;width:100vw}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideindown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideoutleft{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(-100%);opacity:0%}}@keyframes slideoutright{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(100%);opacity:0%}}@keyframes slideoutup{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(-100%);opacity:0}}@keyframes slideoutdown{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(100%);opacity:0}}:host>#external-container{font-family:var(--font-family-sans);font-weight:var(--font-rg);border-radius:4px;font-size:14px;letter-spacing:0.16px;box-sizing:border-box;min-height:52px;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-3)}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}:host>#external-container #text{color:var(--color-white);line-height:20px;margin-right:calc(var(--space-unit) * 2);letter-spacing:0.16px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{cursor:pointer;fill:var(--color-white);margin-left:calc(var(--space-unit) * 2)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--grey800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
+const stylesCss = ":host{display:inline-block;min-width:200px;width:100vw}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideindown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:100%}}@keyframes slideoutleft{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(-100%);opacity:0%}}@keyframes slideoutright{0%{transform:translateX(var(--percentuale));opacity:calc(100-var(--percentuale))}100%{transform:translateX(100%);opacity:0%}}@keyframes slideoutup{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(-100%);opacity:0}}@keyframes slideoutdown{0%{transform:translateY(var(--percentuale));opacity:100%}100%{transform:translateY(100%);opacity:0}}:host>#external-container{font-family:var(--font-family-sans);font-weight:var(--font-rg);border-radius:4px;font-size:14px;letter-spacing:0.16px;box-sizing:border-box;min-height:52px;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-3)}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}:host>#external-container #text{color:var(--color-white);line-height:20px;margin-right:calc(var(--space-unit) * 2);letter-spacing:0.16px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button-deprecated){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{cursor:pointer;fill:var(--color-white);margin-left:calc(var(--space-unit) * 2)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--grey800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";
 
 const ZToastNotification = class {
   constructor(hostRef) {

package/dist/collection/collection-manifest.json

@@ -76,6 +76,7 @@
     "./components/z-table/z-table-sticky-footer/index.js",
     "./components/z-tag/index.js",
     "./components/z-visually-hidden/index.js",
+    "./deprecated/z-button-deprecated/index.js",
     "./deprecated/z-button-filter/index.js",
     "./deprecated/z-chip-deprecated/index.js",
     "./deprecated/z-status-tag/index.js",

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

@@ -10,26 +10,34 @@ export class ZButton {
     this.disabled = false;
     /** HTML button type attribute. */
     this.type = ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
     this.variant = ButtonVariantEnum.primary;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = ButtonSizeEnum.big;
-    /** Reduce button size (deprecated).
-     * @deprecated Use `size` prop.
-     */
-    this.issmall = false;
-    /** Spy to render square button. */
-    this.square = false;
+  }
+  getAttributes() {
+    return {
+      id: this.htmlid,
+      class: classNames(this.variant, this.size),
+      "aria-label": this.ariaLabel,
+    };
+  }
+  componentDidLoad() {
+    if (this.hostElement.innerText) {
+      this.hostElement.classList.add("with-text");
+    }
   }
   render() {
-    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (h("slot", { name: "element" },
-      h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) },
+    if (this.href)
+      return (h("a", Object.assign({ href: this.href, target: this.target }, this.getAttributes()),
         this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
-        h("slot", null))));
+        h("slot", null)));
+    return (h("button", Object.assign({ name: this.name, type: this.type, disabled: this.disabled }, this.getAttributes()),
+      this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
+      h("slot", null)));
   }
   static get is() { return "z-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["styles.css"]
   }; }
@@ -37,6 +45,57 @@ export class ZButton {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "defines a string value that labels an interactive element, used for accessibility."
+      },
+      "attribute": "aria-label",
+      "reflect": true
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML a href attribute. If it is set, it renders an HTML a tag."
+      },
+      "attribute": "href",
+      "reflect": true
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML a target attribute."
+      },
+      "attribute": "target",
+      "reflect": true
+    },
     "htmlid": {
       "type": "string",
       "mutable": false,
@@ -128,7 +187,7 @@ export class ZButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
+        "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
       },
       "attribute": "variant",
       "reflect": true,
@@ -173,45 +232,6 @@ export class ZButton {
       "attribute": "size",
       "reflect": true,
       "defaultValue": "ButtonSizeEnum.big"
-    },
-    "issmall": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "Use `size` prop."
-          }],
-        "text": "Reduce button size (deprecated)."
-      },
-      "attribute": "issmall",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "square": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Spy to render square button."
-      },
-      "attribute": "square",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "hostElement"; }