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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-ByN2sYu6.js';
+import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
 import { P as PopoverPosition } from './index-BKCj6NR2.js';
 
 const stylesCss = () => `:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;
@@ -26,7 +26,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '21236ca0162a4ce1c7d1c6adfd052332e8a566b8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: 'fb78016230d9246043c60bd22e1ed7c6baa4d78d' })));
+        return (h("z-popover", { key: '0cc1e8ea0e6896f5031309a5984c09df4b095d8b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: 'a0548343b099fe7986066d821a455f1092428b38' })));
     }
 };
 ZTooltip.style = stylesCss();

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
-import { r as randomId } from './utils-0PByxJyN.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
+import { r as randomId } from './utils-DYd3kO0P.js';
 import './z-td.entry.js';
 import './z-th.entry.js';
 import './index-BKCj6NR2.js';

package/dist/esm/z-tree-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
 import { g as KeyboardCode } from './index-BKCj6NR2.js';
 
 const stylesCss = () => `:host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}`;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-ByN2sYu6.js';
+import { r as registerInstance, h } from './index-DPdXlnVe.js';
 
 const stylesCss = () => `:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;
 

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

@@ -31,6 +31,10 @@ export declare class ZAppHeader implements ComponentInterface {
      * Placeholder text for the search bar.
      */
     searchPlaceholder: string;
+    /**
+     * Label of the search button.
+     */
+    searchButtonLabel?: string;
     /**
      * Search string for the search bar.
      */

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

@@ -20,6 +20,8 @@ declare const StoryMeta: {
         "--app-header-content-max-width": string;
         enableSearch: false;
         searchPageUrl: string;
+        searchPlaceholder: string;
+        searchButtonLabel: string;
         enableZLogo: false;
         enableOffcanvas: false;
     };
@@ -93,6 +95,11 @@ export declare const OffcanvasMenu: {
     args: {
         enableOffcanvas: true;
     };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
 export declare const Stuck: {

package/dist/types/components/z-notification/index.d.ts

@@ -4,7 +4,8 @@ import { NotificationType } from "../../beans";
  * 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.
+ * @cssprop --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%.
+ * @cssprop --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).
  */
 export declare class ZNotification implements ComponentInterface {
     /** Name of the icon on the left of the content */

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

@@ -3,9 +3,7 @@ import { NotificationType } from "../../beans";
 import { CSSVarsArguments } from "../../utils/storybook-utils";
 import "./index";
 import "./index.stories.css";
-type ZNotificationStoriesArgs = ZNotification & {
-    notificationText: string;
-} & CSSVarsArguments<"--z-notification--content-max-width">;
+type ZNotificationStoriesArgs = ZNotification & CSSVarsArguments<"--z-notification--top-offset" | "--z-notification--content-max-width">;
 declare const StoryMeta: {
     title: string;
     component: string;
@@ -16,10 +14,17 @@ declare const StoryMeta: {
             };
             options: NotificationType[];
         };
+        borderposition: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
     };
     args: {
         "--z-notification--content-max-width": string;
         contenticonname: string;
+        borderposition: "bottom";
         actiontext: string;
         showclose: false;
         sticky: false;
@@ -30,24 +35,12 @@ export default StoryMeta;
 export declare const Default: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the border top variant set the `borderposition` property to `top`.
- */
-export declare const BorderTop: {
-    args: {
-        borderposition: "top";
-    };
-    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
-};
 export declare const LongText: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the banner variant set the `sticky` property to `true`.
- */
-export declare const BannerVariant: {
+export declare const StickyBanner: {
     args: {
-        notificationText: string;
+        "--z-notification--top-offset": string;
     };
     parameters: {
         controls: {
@@ -56,13 +49,16 @@ export declare const BannerVariant: {
     };
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
-/**
- * To use the inline variant set the `sticky` property to `false`.
- */
-export declare const InlineVariant: {
+export declare const CenteredContent: {
     args: {
-        notificationText: string;
+        "--z-notification--content-max-width": string;
     };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+};
+/**
+ * To have an inline notification keep the `sticky` property set to `false`.
+ */
+export declare const Inline: {
     parameters: {
         controls: {
             exclude: string[];
@@ -70,3 +66,12 @@ export declare const InlineVariant: {
     };
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
+/**
+ * The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
+ */
+export declare const BorderPosition: {
+    args: {
+        borderposition: "top";
+    };
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};

package/dist/types/components/z-searchbar/index.d.ts

@@ -6,13 +6,14 @@ import { ButtonVariant, ControlSize, SearchbarItem } from "../../beans";
  * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
  */
 export declare class ZSearchbar implements ComponentInterface {
-    /** the id of the searchbar element */
+    host: HTMLZSearchbarElement;
+    /** The id of the searchbar element */
     htmlid: string;
     /** Prevent submit action */
     preventSubmit?: boolean;
-    /** the input label */
+    /** The input label */
     label?: string;
-    /** the input aria-label */
+    /** The input aria-label */
     htmlAriaLabel?: string;
     /** Input search string */
     value?: string;
@@ -22,7 +23,7 @@ export declare class ZSearchbar implements ComponentInterface {
     autocomplete?: boolean;
     /** Minimun number of characters to dispatch typing event */
     autocompleteMinChars?: number;
-    /** Number of results shown - default all */
+    /** Number of results shown. Default: all */
     resultsCount?: number;
     /** Search helper text */
     searchHelperLabel?: string;
@@ -32,55 +33,52 @@ export declare class ZSearchbar implements ComponentInterface {
     sortResultsItems?: boolean;
     /** Show submit button */
     showSearchButton?: boolean;
-    /** Set button icon without label*/
+    /** Hide the label of the submit button, showing only the icon */
     searchButtonIconOnly?: boolean;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    /** The label of the submit button */
+    searchButtonLabel?: string;
+    /** Size of the `z-input` and submit `z-button` */
     size?: ControlSize;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    /** Submit `z-button` variant */
     variant?: ButtonVariant;
     searchString: string;
-    currResultsCount: number;
+    currResultsCount: number | undefined;
     showResults: boolean;
     isMobile: boolean;
     selectedItem?: SearchbarItem;
-    element: HTMLZSearchbarElement;
     private resultsItemsList;
     private inputRef;
-    private resizeObserver;
-    private items;
+    /** Media query list for detecting mobile view. */
+    private mql?;
+    /** Listener for changes in the mobile view media query. */
+    private onMobileViewChange?;
     /** Emitted on search submit, return search string */
     searchSubmit: EventEmitter<string>;
-    private emitSearchSubmit;
     /** Emitted on search typing, return search string */
     searchTyping: EventEmitter<string>;
-    private emitSearchTyping;
     /** Emitted on search result click, return item */
     searchItemClick: EventEmitter<SearchbarItem>;
     private emitSearchItemClick;
+    private emitSearchSubmit;
     watchItems(): void;
     watchResultsCount(): void;
     watchValue(): void;
     watchSearchString(): void;
-    watchShowResults(): void;
-    disconnectedCallback(): void;
-    componentDidLoad(): void;
-    componentWillLoad(): void;
     private getResultsItemsList;
     private getGroupedItems;
-    private checkResultsCount;
+    private onListItemKeyDown;
+    private onSearchHelperKeyDown;
+    private handleArrowsNavigation;
     private handleStopTyping;
     private handleSubmit;
     private handleOutsideClick;
-    private renderInput;
-    private renderButton;
-    private renderResults;
-    private renderResultsList;
-    private renderItems;
-    private handleArrowsNavigation;
-    private renderItem;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
     private renderItemLabel;
-    private renderItemCategory;
-    private renderSearchHelper;
-    private renderShowAllResults;
+    private renderItem;
+    /**
+     * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.
+     */
+    private renderItemGroups;
     render(): HTMLZSearchbarElement;
 }

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

@@ -24,6 +24,7 @@ declare const StoryMeta: {
         preventSubmit: false;
         showSearchButton: false;
         searchButtonIconOnly: false;
+        searchButtonLabel: string;
         autocomplete: false;
         autocompleteMinChars: number;
         resultsCount: any;
@@ -65,6 +66,7 @@ export declare const Autocomplete: {
         htmlid: string;
         showSearchButton: false;
         searchButtonIconOnly: false;
+        searchButtonLabel: string;
     };
     render: (args: ZSearchbarStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
@@ -74,6 +76,7 @@ export declare const AutocompleteWithComplexItems: {
         htmlid: string;
         showSearchButton: false;
         searchButtonIconOnly: false;
+        searchButtonLabel: string;
         resultsItems: ({
             label: string;
             icon: string;
@@ -99,6 +102,7 @@ export declare const AutocompleteWithComplexTreeItems: {
         htmlid: string;
         showSearchButton: false;
         searchButtonIconOnly: false;
+        searchButtonLabel: string;
         resultsItems: ({
             label: string;
             icon: string;

package/dist/types/components.d.ts

@@ -139,6 +139,10 @@ export namespace Components {
           * @default true
          */
         "enableZLogo": boolean;
+        /**
+          * Label of the search button.
+         */
+        "searchButtonLabel"?: string;
         /**
           * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
          */
@@ -1785,7 +1789,8 @@ export namespace Components {
     /**
      * Notification bar component.
      * @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.
+     * @cssprop --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%.
+     * @cssprop --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).
      */
     interface ZNotification {
         /**
@@ -2099,16 +2104,16 @@ export namespace Components {
          */
         "autocompleteMinChars"?: number;
         /**
-          * the input aria-label
+          * The input aria-label
          */
         "htmlAriaLabel"?: string;
         /**
-          * the id of the searchbar element
+          * The id of the searchbar element
           * @default `searchbar-${randomId()}`
          */
         "htmlid": string;
         /**
-          * the input label
+          * The input label
          */
         "label"?: string;
         /**
@@ -2121,7 +2126,7 @@ export namespace Components {
          */
         "preventSubmit"?: boolean;
         /**
-          * Number of results shown - default all
+          * Number of results shown. Default: all
          */
         "resultsCount"?: number;
         /**
@@ -2129,10 +2134,15 @@ export namespace Components {
          */
         "resultsItems"?: SearchbarItem[] | string;
         /**
-          * Set button icon without label
+          * Hide the label of the submit button, showing only the icon
           * @default false
          */
         "searchButtonIconOnly"?: boolean;
+        /**
+          * The label of the submit button
+          * @default "CERCA"
+         */
+        "searchButtonLabel"?: string;
         /**
           * Search helper text
           * @default "Cerca {searchString}"
@@ -2144,7 +2154,7 @@ export namespace Components {
          */
         "showSearchButton"?: boolean;
         /**
-          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+          * Size of the `z-input` and submit `z-button`
           * @default ControlSize.BIG
          */
         "size"?: ControlSize;
@@ -2158,7 +2168,7 @@ export namespace Components {
          */
         "value"?: string;
         /**
-          * Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`.
+          * Submit `z-button` variant
           * @default ButtonVariant.PRIMARY
          */
         "variant"?: ButtonVariant;
@@ -3699,7 +3709,8 @@ declare global {
     /**
      * Notification bar component.
      * @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.
+     * @cssprop --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%.
+     * @cssprop --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).
      */
     interface HTMLZNotificationElement extends Components.ZNotification, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZNotificationElementEventMap>(type: K, listener: (this: HTMLZNotificationElement, ev: ZNotificationCustomEvent<HTMLZNotificationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4388,6 +4399,10 @@ declare namespace LocalJSX {
           * Emitted when the `stuck` state of the header changes
          */
         "onSticking"?: (event: ZAppHeaderCustomEvent<any>) => void;
+        /**
+          * Label of the search button.
+         */
+        "searchButtonLabel"?: string;
         /**
           * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
          */
@@ -6170,7 +6185,8 @@ declare namespace LocalJSX {
     /**
      * Notification bar component.
      * @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.
+     * @cssprop --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%.
+     * @cssprop --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).
      */
     interface ZNotification {
         /**
@@ -6516,16 +6532,16 @@ declare namespace LocalJSX {
          */
         "autocompleteMinChars"?: number;
         /**
-          * the input aria-label
+          * The input aria-label
          */
         "htmlAriaLabel"?: string;
         /**
-          * the id of the searchbar element
+          * The id of the searchbar element
           * @default `searchbar-${randomId()}`
          */
         "htmlid"?: string;
         /**
-          * the input label
+          * The input label
          */
         "label"?: string;
         /**
@@ -6550,7 +6566,7 @@ declare namespace LocalJSX {
          */
         "preventSubmit"?: boolean;
         /**
-          * Number of results shown - default all
+          * Number of results shown. Default: all
          */
         "resultsCount"?: number;
         /**
@@ -6558,10 +6574,15 @@ declare namespace LocalJSX {
          */
         "resultsItems"?: SearchbarItem[] | string;
         /**
-          * Set button icon without label
+          * Hide the label of the submit button, showing only the icon
           * @default false
          */
         "searchButtonIconOnly"?: boolean;
+        /**
+          * The label of the submit button
+          * @default "CERCA"
+         */
+        "searchButtonLabel"?: string;
         /**
           * Search helper text
           * @default "Cerca {searchString}"
@@ -6573,7 +6594,7 @@ declare namespace LocalJSX {
          */
         "showSearchButton"?: boolean;
         /**
-          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+          * Size of the `z-input` and submit `z-button`
           * @default ControlSize.BIG
          */
         "size"?: ControlSize;
@@ -6587,7 +6608,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`.
+          * Submit `z-button` variant
           * @default ButtonVariant.PRIMARY
          */
         "variant"?: ButtonVariant;
@@ -7146,6 +7167,7 @@ declare namespace LocalJSX {
         "enableOffcanvas": boolean;
         "enableSearch": boolean;
         "searchPlaceholder": string;
+        "searchButtonLabel": string;
         "searchString": string;
         "searchPageUrl": string;
         "enableZLogo": boolean;
@@ -7629,6 +7651,7 @@ declare namespace LocalJSX {
         "sortResultsItems": boolean;
         "showSearchButton": boolean;
         "searchButtonIconOnly": boolean;
+        "searchButtonLabel": string;
         "size": ControlSize;
         "variant": ButtonVariant;
     }
@@ -8086,7 +8109,8 @@ declare module "@stencil/core" {
             /**
              * Notification bar component.
              * @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.
+             * @cssprop --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%.
+             * @cssprop --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": LocalJSX.IntrinsicElements["z-notification"] & JSXBase.HTMLAttributes<HTMLZNotificationElement>;
             /**