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

package/dist/types/components/z-menu-section/index.d.ts

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * A component to create submenus inside the ZMenu.
  * @slot - Label of the menu section.
  * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).
  */
-export declare class ZMenuSection {
+export declare class ZMenuSection implements ComponentInterface {
     host: HTMLZMenuSectionElement;
     /** Active state */
     active?: boolean;

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

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot modalCloseButton - slot for custom close button
  * @slot modalContent - slot for the content of the modal
  * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
-export declare class ZModal {
+export declare class ZModal implements ComponentInterface {
     /** unique id */
     modalid: string;
     /** title text (optional) */

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
@@ -7,7 +7,7 @@ import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
  * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
  * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
-export declare class ZNavigationTabs {
+export declare class ZNavigationTabs implements ComponentInterface {
     /**
      * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
      */

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

@@ -1,11 +1,13 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 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. 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 {
+export declare class ZNotification implements ComponentInterface {
     /** Name of the icon on the left of the content */
     contenticonname?: string;
     /** Action button text */
@@ -21,6 +23,8 @@ export declare class ZNotification {
     showshadow?: boolean;
     /** Enable sticky notification bar. */
     sticky?: boolean;
+    /** Border position */
+    borderposition?: "top" | "bottom";
     /** Call to action clicked */
     notificationAction: EventEmitter;
     private handleActionButtonClick;

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

@@ -1,10 +1,9 @@
 import { type ZNotification } from ".";
 import { NotificationType } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
 import "./index";
 import "./index.stories.css";
-type ZNotificationStoriesArgs = ZNotification & {
-    notificationText: string;
-};
+type ZNotificationStoriesArgs = ZNotification & CSSVarsArguments<"--z-notification--top-offset" | "--z-notification--content-max-width">;
 declare const StoryMeta: {
     title: string;
     component: string;
@@ -15,9 +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;
@@ -31,12 +38,9 @@ export declare const Default: {
 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: {
@@ -45,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[];
@@ -59,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-offcanvas/index.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - Slot for the offcanvas content.
@@ -6,7 +6,7 @@ import { OffCanvasVariant, TransitionDirection } from "../../beans";
  * @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 declare class ZOffcanvas {
+export declare class ZOffcanvas implements ComponentInterface {
     /**
      * Offcanvas variant.
      * - `overlay`: The offcanvas covers the page content putting an overlay.

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

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * 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 declare class ZPagination {
+export declare class ZPagination implements ComponentInterface {
     host: HTMLZPaginationElement;
     /** Pagination label placed before the bar. */
     label?: string;

package/dist/types/components/z-panel-elem/index.d.ts

@@ -1,7 +1,8 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot `descrSlotName` - description content
  */
-export declare class ZPanelElem {
+export declare class ZPanelElem implements ComponentInterface {
     /** html element id (optional) */
     elemid?: string;
     /** image url source (optional) */

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { PopoverPosition } from "../../beans";
 /**
  * Popover component.
@@ -13,7 +13,7 @@ import { PopoverPosition } from "../../beans";
  * @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 declare class ZPopover {
+export declare class ZPopover implements ComponentInterface {
     /**
      * The preferred position to render the popover.
      * The popover will automatically search another position if not enough space is available for the preferred position.

package/dist/types/components/z-result-card/index.d.ts

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot tags - slot containing the descriptors for the opera variant
  * @slot volumes - slot containing the volume count to be displayed in the opera variant
  */
-export declare class ZResultCard {
+export declare class ZResultCard implements ComponentInterface {
     hostElement: HTMLZResultCardElement;
     /** The title of the card. */
     cardTitle: string;

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

@@ -1,18 +1,19 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ButtonVariant, ControlSize, SearchbarItem } from "../../beans";
 /**
  * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
  * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
  * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
  */
-export declare class ZSearchbar {
-    /** the id of the searchbar element */
+export declare class ZSearchbar implements ComponentInterface {
+    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 {
     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 {
     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/z-select/index.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ControlSize, InputStatus, SelectItem } from "../../beans";
-export declare class ZSelect {
+export declare class ZSelect implements ComponentInterface {
     host: HTMLZSelectElement;
     /** the id of the input element */
     htmlid: string;

package/dist/types/components/z-skip-to-content/index.d.ts

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { SkipToContentLink, ThemeVariant } from "../../beans";
 /**
  * Component short description.
  */
-export declare class ZSkipToContent {
+export declare class ZSkipToContent implements ComponentInterface {
     /** Graphical variant: `dark`, `light`. */
     variant?: ThemeVariant;
     /** Array to fill link into skip-content */

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

@@ -1,6 +1,7 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot - slot for `z-stepper-item`
  */
-export declare class ZStepper {
+export declare class ZStepper implements ComponentInterface {
     render(): HTMLSlotElement;
 }

package/dist/types/components/z-stepper-item/index.d.ts

@@ -1,4 +1,5 @@
-export declare class ZStepperItem {
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class ZStepperItem implements ComponentInterface {
     /**
      * The number of the step item.
      */

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

@@ -1,10 +1,11 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * Ztag component.
  * @slot - The text of the z-tag.
  * @cssprop --z-tag-text-color - text and icon color using tokens.
  * @cssprop --z-tag-bg - background color of the z-tag.
  */
-export declare class ZTag {
+export declare class ZTag implements ComponentInterface {
     host: HTMLZTagElement;
     /** [optional] Tag icon */
     icon?: string;

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

@@ -1,11 +1,11 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ToastNotification, ToastNotificationTransition } from "../../beans";
 /**
  * ZToastNotification component.
  * @slot message - Custom HTML message
  * @slot button - Custom button
  */
-export declare class ZToastNotification {
+export declare class ZToastNotification implements ComponentInterface {
     hostElement: HTMLZToastNotificationElement;
     /** toast notification's title */
     heading?: string;
@@ -26,6 +26,10 @@ export declare class ZToastNotification {
     /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/
     transition?: ToastNotificationTransition;
     percentage: number;
+    /** Indicates if the toast notification has a slotted button. */
+    hasSlottedButton: boolean;
+    /** notification close event */
+    toastClose: EventEmitter;
     private sliderManager;
     private elapsedTime;
     private timeoutHandle;
@@ -34,19 +38,16 @@ export declare class ZToastNotification {
     watchPropIsdraggable(newValue: boolean): void;
     watchPropAutoclose(newValue: number): void;
     watchPropPauseonfocusloss(newValue: boolean): void;
-    /** notification close event */
-    toastClose: EventEmitter;
-    private emitToastClose;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    private close;
     private visibilityChangeEventHandler;
     private validateAutoclose;
-    private mapSlideOutClass;
     private calculateDraggedPercentage;
     private handleSlideOutDragAnimation;
     private onFocus;
     private onBlur;
     private startClosingTimeout;
-    private renderContent;
+    private checkSlottedButton;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     render(): HTMLZToastNotificationElement;
 }

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

@@ -9,7 +9,7 @@ declare const StoryMeta: {
     argTypes: {
         type: {
             control: {
-                type: "select";
+                type: "inline-radio";
             };
             options: ToastNotification[];
         };
@@ -76,11 +76,21 @@ export declare const SlottedMessage: {
     args: {
         transition: ToastNotificationTransition.SLIDE_IN_DOWN;
     };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
     render: (args: ZToastNotification) => TemplateResult<1>;
 };
 export declare const SlottedMessageLongText: {
     args: {
         transition: ToastNotificationTransition.SLIDE_IN_DOWN;
     };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
     render: (args: ZToastNotification) => TemplateResult<1>;
 };

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

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { ToastNotificationPosition } from "../../beans";
-export declare class ZToastNotificationList {
+export declare class ZToastNotificationList implements ComponentInterface {
     hostElement: HTMLZToastNotificationListElement;
     /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
     position: ToastNotificationPosition;

package/dist/types/components/z-toggle-button/index.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-export declare class ZToggleButton {
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+export declare class ZToggleButton implements ComponentInterface {
     /** label text */
     label: string;
     /** disabled status flag (optional) */

package/dist/types/components/z-toggle-switch/index.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { LabelPosition } from "../../beans";
-export declare class ZToggleSwitch {
+export declare class ZToggleSwitch implements ComponentInterface {
     /** Disabled flag */
     disabled?: boolean;
     /** Label position */

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ColorPickerPalette, PopoverPosition } from "../../beans";
 import { ZColorPickerCustomEvent, ZToolCustomEvent } from "../../components";
 import { IconName } from "../../constants/iconset";
@@ -6,7 +6,7 @@ import { IconName } from "../../constants/iconset";
  * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.
  * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.
  */
-export declare class ZTool {
+export declare class ZTool implements ComponentInterface {
     hostElement: HTMLZToolElement;
     /** Tool icon */
     icon: IconName;

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

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { ZToolCustomEvent } from "../../components";
 /**
  * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.
@@ -7,7 +8,7 @@ import { ZToolCustomEvent } from "../../components";
  *
  * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.
  */
-export declare class ZToolbar {
+export declare class ZToolbar implements ComponentInterface {
     hostElement: HTMLZToolbarElement;
     /** Accessible label for the toolbar. */
     htmlAriaLabel?: string;

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { PopoverPosition } from "../../beans";
 /**
  * Tooltip component.
@@ -8,7 +8,7 @@ import { PopoverPosition } from "../../beans";
  * @cssprop --z-tooltip-theme--text - foreground color of the popover.
  * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
  */
-export declare class ZTooltip {
+export declare class ZTooltip implements ComponentInterface {
     /** Tooltip position. */
     position: PopoverPosition;
     /** Enable tooltip dark mode. */

package/dist/types/components/z-visually-hidden/index.d.ts

@@ -1,3 +1,4 @@
-export declare class ZVisuallyHidden {
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class ZVisuallyHidden implements ComponentInterface {
     render(): HTMLSlotElement;
 }