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

package/dist/collection/components/z-modal/styles.css

@@ -1,8 +1,11 @@
 :host {
+  /**
+   * @prop --z-modal-content-padding: padding of the modal's content. The default is `16px` (`--space-unit * 2`).
+   */
+  --z-modal-content-padding: ;
+
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-
-  --z-modal-content-padding: ;
 }
 
 :host > dialog {

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

@@ -4,8 +4,6 @@ import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabs
  * Navigation tabs component.
  * 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 class ZNavigationTabs {
     constructor() {
@@ -232,10 +230,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
+        return (h(Host, { key: 'fc24983c8706f875f0ca3284ebf57d428cfb5350', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', 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", { key: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'e75513c2024b5db9fa5b5c336cf634084b1509ce', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '4f14ef83b63b07d488420731a79538c697c44ae1', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'c851ed409a995bec7867ac028459f9b26de00634', 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", { key: 'c2c3494116a2a32520bc426382785b978b1a59d3' })), h("button", { key: 'bd5a087166b94c8bc69a9018cce6b382690861ca', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '6ee22a66878dc029ff70915a2905580c7f14e211', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,8 @@
 z-navigation-tabs {
+  /**
+   * @prop --z-navigation-tabs-nav-buttons-bg: Background color of the navigation buttons. The default is `--color-surface01`.
+   * @prop --z-navigation-tabs-nav-buttons-fg: Foreground color of the navigation buttons. The default is `--color-primary01`.
+   */
   --z-navigation-tabs-nav-buttons-bg: ;
   --z-navigation-tabs-nav-buttons-fg: ;
 

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

@@ -2,8 +2,6 @@ import { Host, h } from "@stencil/core";
 /**
  * Notification bar component.
  * @slot - The text of the notification.
- * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
- * @cssprop --z-notification--content-max-width - The max width of the notification content.
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -31,7 +29,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '40da9cc297666e279f89631cede4c24d16abbc79' }, h("div", { key: '1591d69902fe6ed78424da9363b5aa6ca56b21fe', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '585a4bc748ce664b6a3cb6e13879f98f48eed38d', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'f3a415e24907ade9cff0c966cbc905a2ee2b0982', class: "content-container" }, h("div", { key: 'adc775c0294adc136e2138cc32b8b86b32c765ef', class: "content-text" }, h("slot", { key: 'e467e4ea81b76bf092650d2a52cb249bc70bed78' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '6253c14815223122888d3b71b7e5a08fa9ab72c1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '0baeb981e72a49fec6055b16c37ef7395204861f', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '229f88bd8ef914cb361f84f3435d207b433862c1', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: '05288cf38255e2b7ee8567ea735cc073d2cae4a1' }, h("div", { key: '8b737c2201659e6b50911c4a83a5d6eae4facf46', class: "main-container" }, this.contenticonname && (h("z-icon", { key: 'd91f0f38d124dd0f61ce14e3607e3eb0fa4b6650', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'bf7b392e4001b37272092270bc31b168f600dbc4', class: "content-container" }, h("div", { key: '187e9cbcc37ff55c77a7adc946ac83ffd813ea81', class: "content-text" }, h("slot", { key: '4bfcb8305ed25eb85ab95aa3a475f2e61b064f63' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'f0a75df6238269b73e6853353c8bb8feee11e90e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '575860241a746ddcddd16646496bbfdf458e91db', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'a096f412fec8ab8eec3081853d5baada531bcf54', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,12 @@
 :host {
+  /**
+   * @prop --z-notification--top-offset: The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
+   */
   --z-notification--top-offset: 0;
   --z-notification--content-max-width: 100%;
+  --z-notification--inline-padding: ;
 
   display: block;
   width: 100%;
@@ -10,7 +16,7 @@
   display: flex;
   max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
-  padding: calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));
   margin: 0 auto;
   background-color: transparent;
   font-family: var(--font-family-sans);
@@ -90,11 +96,12 @@ button {
 }
 
 .content-text {
+  width: 100%;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
-  line-height: 20px;
+  line-height: 1.4;
 }
 
 .action-button {
@@ -102,12 +109,12 @@ button {
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   letter-spacing: 0.32px;
-  line-height: 16px;
+  line-height: 1.333;
+  outline: none;
 }
 
-.action-button:focus {
+.action-button:focus-visible {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .content-container + .close-button {
@@ -119,7 +126,7 @@ button {
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .content-container {
     flex-wrap: nowrap;
   }

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

@@ -2,9 +2,6 @@ import { h, Host } from "@stencil/core";
 import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - Slot for the offcanvas content.
- * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
- * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
- * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
  */
 export class ZOffcanvas {
     constructor() {
@@ -159,8 +156,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '4a7d050590730574ccb25ecd1f93032fac113549', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4507bf74ea9c8b097173ed048cd52af0704b8fb6', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '79c69732bcdf90d5dc25713bdec66034b595f75d', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: 'f133b7048d147138f4db154f2591070b5c74bd8a', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '885eeed8b2ebd31467366f208c5f66eace44ad0c', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '8775a7fea17fac8ddcf69a1a1001b69aa1d29ae7', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4ca1eae5425dc05fe71d1bc171481ad22b90d0b7', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'b22cbee1928706351f03099ab860957403f529a7', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '96e1701e1e400dbe09c7625debcb79ec06fe91fb', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'bf842940be8987308e745bdda6b9254171045a62', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-offcanvas/styles.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --z-offcanvas--top-space: Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
+   * @prop --z-offcanvas--container-width: Width of the offcanvas for `left` and `right` direction. Default: `375px`.
+   * @prop --z-offcanvas--container-height: Height of the offcanvas for `up` direction. Default: `90%`.
+   */
   --z-offcanvas--container-width: ;
   --z-offcanvas--container-height: ;
   --z-offcanvas--top-space: ;

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

@@ -2,8 +2,6 @@ import { Host, h, } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
- * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
- * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
  */
 export class ZPagination {
     constructor() {
@@ -178,10 +176,10 @@ export class ZPagination {
         ];
     }
     renderBackButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla pagina precedente", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
     }
     renderForwardButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla prossima pagina", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
     }
     renderMobile() {
         const pagesChunks = this.getPagesChunks();

package/dist/collection/components/z-pagination/styles.css

@@ -1,4 +1,10 @@
 z-pagination {
+  /**
+   * @prop --z-pagination--page-button-width: Width of the pagination's page buttons. The default is 64px on mobile and 88px on desktop.
+   * @prop --z-pagination--pages-container-max-width: Max width of the container of the page buttons. The default is 100% (full width).
+   * @prop --z-pagination-background-color: Background of the pagination's tabs. The default is --color-background
+   * @prop --z-pagination-background-color-hover: Background of the pagination's tabs on hover. The default is --color-surface01
+   */
   --z-pagination--page-button-width: 64px;
   --z-pagination--pages-container-max-width: 100%;
   --z-pagination-background-color: var(--color-background);

package/dist/collection/components/z-panel-elem/index.js

@@ -11,12 +11,12 @@ export class ZPanelElem {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '6a782a3e364918d674cd75e87ee3d4c45051c01a', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '5f1b5804796364f571c07595199f206bf07fc348', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b3180aff50d92de37b4c0e2b42a08aa690f70eab', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '9e461e124c92188bfb882b038d7bf72e2dc833a6', class: "panel-elem-link" }, h("a", { key: 'c9585b59f9fda70d371ac569ca3a69e6959a850a', class: {
+        return (h("div", { key: '5ec6258c1b03272d134bfd051fccfa2f922d9d18', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '0e2510843c7f3d4a6a51d4e3397972e9f8ff9278', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'a147b33a20b2432bca9577c724bcb90ee4ec0796', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '7eb80ce42df88d0f6f20cd8489b0052588539602', class: "panel-elem-link" }, h("a", { key: '40622a092e1b7c111932edcf8e3f083a7e589148', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '78acdd240f6f8bba67e30fb0027ca0e9c7bd96c2', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '4fc3ffb45cc05b62e1350b82be87ea4558b42c03', class: "panel-elem-desc" }, h("slot", { key: '11e64776988c032c870ac9389d559a679dbd9588', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'c5febcd1de48afe90a33cba4c3e4cc90fe08444d', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '4f131023ff6a577c535670c9762ae8458825c94f', class: "panel-elem-desc" }, h("slot", { key: '82e06bd4163c9e72c7f0614c314a001d158db9ce', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,11 +8,6 @@ import { containsElement, findContainingBlockAncestor, getDevice, getParentEleme
  *
  * Notes:
  * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
- *
- * @cssprop --z-popover-theme--surface - background color of the popover.
- * @cssprop --z-popover-theme--text - foreground color of the popover.
- * @cssprop --z-popover-padding - padding of the popover.
- * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
  */
 export class ZPopover {
     constructor() {
@@ -512,7 +507,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '11ab6b060fdc4a10752881c38d3a369f2ae267a6', "current-position": this.currentPosition }, h("slot", { key: '40ae4b9e51638e5d92d916937ccfac5f85c0d36f' })));
+        return (h(Host, { key: '52bff483a21ec4b2911ef16ae19fe4a860896b4a', "current-position": this.currentPosition }, h("slot", { key: '88e89856e0083f540df0fd0d7155c55c16c1932b' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-popover/styles.css

@@ -1,4 +1,10 @@
 :host {
+  /**
+   * @prop --z-popover-theme--surface: background color of the popover.
+   * @prop --z-popover-theme--text: foreground color of the popover.
+   * @prop --z-popover-padding: padding of the popover.
+   * @prop --z-popover-shadow-filter: drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
+   */
   --z-popover-theme--surface: ;
   --z-popover-theme--text: ;
   --z-popover-padding: ;

package/dist/collection/components/z-result-card/styles.css

@@ -7,7 +7,7 @@
   display: flex;
   overflow: hidden;
   min-width: 0;
-  height: 11.125rem;
+  min-height: 11.125rem;
   padding: var(--space-unit);
   border: var(--border-size-medium) solid var(--color-surface02);
   background-color: var(--color-surface01);
@@ -57,6 +57,7 @@ z-book-cover {
 .card-subtitle {
   overflow: hidden;
   color: var(--color-default-text);
+  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -131,10 +132,12 @@ z-book-cover {
 
 @media (max-width: 767px) {
   .card-title {
-    display: block;
+    display: -webkit-box;
     overflow: hidden;
-    line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    line-height: 1.4;
+    word-break: break-word;
   }
 }