@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

package/dist/types/components/deprecated/z-menu-section-deprecated/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 item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
  */
-export declare class ZMenuSectionDeprecated {
+export declare class ZMenuSectionDeprecated implements ComponentInterface {
     hostElement: HTMLZMenuSectionDeprecatedElement;
     /** Active state */
     active?: boolean;

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

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 import { ZSectionTitleDividerPosition } from "../../../beans";
 /**
  * Section title component.
@@ -8,7 +9,7 @@ import { ZSectionTitleDividerPosition } from "../../../beans";
  * @slot primary-title - Slot for the primary title.
  * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
  */
-export declare class ZSectionTitle {
+export declare class ZSectionTitle implements ComponentInterface {
     /**
      * Divider position for the primary title.
      * This prop only works if the secondary title is not set.

package/dist/types/components/file-upload/z-dragdrop-area/index.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-export declare class ZDragdropArea {
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+export declare class ZDragdropArea implements ComponentInterface {
     /** drag & drop button label */
     dragAndDropLabel: string;
     /** State that indicates if the user is dragging a file over the drag & drop area */

package/dist/types/components/file-upload/z-file/index.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-export declare class ZFile {
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+export declare class ZFile implements ComponentInterface {
     private icon;
     private ellipsis?;
     private chip?;

package/dist/types/components/file-upload/z-file-upload/index.d.ts

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { ButtonVariant, ZFileUploadType } from "../../../beans";
 export type ZFileUploadError = {
     cause: "format" | "size";
     message: string;
 };
-export declare class ZFileUpload {
+export declare class ZFileUpload implements ComponentInterface {
     /** Prop indicating the file upload type - can be default or dragdrop */
     type: ZFileUploadType;
     /** Prop indicating the button variant*/

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

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 import { ListSize, ListType } from "../../../beans";
-export declare class ZList {
+export declare class ZList implements ComponentInterface {
     host: HTMLZListElement;
     /**
      * [optional] Sets size of inside elements.

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, ListDividerType, ListSize, ListType } from "../../../beans";
-export declare class ZListElement {
+export declare class ZListElement implements ComponentInterface {
     host: HTMLZListElementElement;
     /** remove filter click event, returns filterid */
     accessibleFocus: EventEmitter<number>;

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

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
-export declare class ZListGroup {
+export declare class ZListGroup implements ComponentInterface {
     host: HTMLZListGroupElement;
     /**
      * [optional] Sets size of inside elements.

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { TreeListItem } from "../../../beans";
-export declare class ZTreeList {
+export declare class ZTreeList implements ComponentInterface {
     host: HTMLZTreeListElement;
     /** Items to render, if they have the url property they will be rendered as clickable links */
     items: TreeListItem[] | string;

package/dist/types/components/table/cells/z-td/index.d.ts

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../../stencil-public-runtime";
 import { PopoverPosition, VisibilityCondition } from "../../../../beans";
 /**
  * ZTd component.
  * @slot - ZTd content.
  */
-export declare class ZTd {
+export declare class ZTd implements ComponentInterface {
     host: HTMLZTdElement;
     /**
      * Number of columns that the cell should span.

package/dist/types/components/table/cells/z-th/index.d.ts

@@ -1,10 +1,11 @@
+import { ComponentInterface } from "../../../../stencil-public-runtime";
 import { PopoverPosition, SortDirection, VisibilityCondition } from "../../../../beans";
 /**
  * ZTh component.
  * @slot - ZTh content.
  * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.
  */
-export declare class ZTh {
+export declare class ZTh implements ComponentInterface {
     host: HTMLZThElement;
     /**
      * Number of columns that the cell should span.

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

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 import "../z-tbody/index";
 import "../z-tfoot/index";
 import "../z-thead/index";
@@ -7,7 +8,7 @@ import "../z-tr/index";
  * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).
  * @cssprop --z-table--cells-padding - Padding of the cells.
  */
-export declare class ZTable {
+export declare class ZTable implements ComponentInterface {
     host: HTMLZTableElement;
     /**
      * Whether the table cells should show a border between them.

package/dist/types/components/table/z-tbody/index.d.ts

@@ -1,7 +1,8 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 /**
  * ZTbody component.
  * @slot - ZTbody content (`z-tr`).
  */
-export declare class ZTbody {
+export declare class ZTbody implements ComponentInterface {
     render(): HTMLZTbodyElement;
 }

package/dist/types/components/table/z-tfoot/index.d.ts

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 /**
  * ZTFoot component.
  * @slot - ZTFoot content (`z-tr`).
  */
-export declare class ZTfoot {
+export declare class ZTfoot implements ComponentInterface {
     /**
      * If true, the footer will be stuck to the bottom of the table.
      */

package/dist/types/components/table/z-thead/index.d.ts

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
 /**
  * ZThead component.
  * @slot - ZThead content (`z-tr`).
  */
-export declare class ZThead {
+export declare class ZThead implements ComponentInterface {
     host: HTMLZTheadElement;
     /**
      * If true, the header will be stuck to the top of the table.

package/dist/types/components/table/z-tr/index.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import "../cells/z-td/index";
 import "../cells/z-th/index";
 /**
@@ -7,7 +7,7 @@ import "../cells/z-th/index";
  * to prevent the row from expanding.
  * @slot - ZTr content (`z-td` or `z-th`).
  */
-export declare class ZTr {
+export declare class ZTr implements ComponentInterface {
     host: HTMLZTrElement;
     /**
      * Whether the row is expandable.

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { AccordionVariant, ControlSize } from "../../beans";
 /**
  * Accordion component.
@@ -16,7 +16,7 @@ import { AccordionVariant, ControlSize } from "../../beans";
  * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
  * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
  */
-export declare class ZAccordion {
+export declare class ZAccordion implements ComponentInterface {
     host: HTMLZAccordionElement;
     /**
      * Text label.

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

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * Anchor navigation component.
  * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.
@@ -13,7 +14,7 @@
  * </z-anchor-navigation>
  * ```
  */
-export declare class ZAnchorNavigation {
+export declare class ZAnchorNavigation implements ComponentInterface {
     /**
      * If enabled, the text of each anchor will be hidden unless
      * for the current one or the one the user is hovering.

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.
  * @slot title - Slot for the main title
@@ -12,7 +12,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
  * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
-export declare class ZAppHeader {
+export declare class ZAppHeader implements ComponentInterface {
     hostElement: HTMLZAppHeaderElement;
     /**
      * Stuck mode for the header.

package/dist/types/components/z-aria-alert/index.d.ts

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { ZAriaAlertMode } from "../../beans";
-export declare class ZAriaAlert {
+export declare class ZAriaAlert implements ComponentInterface {
     /** Aria live mode */
     mode: ZAriaAlertMode;
     render(): HTMLZAriaAlertElement;

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

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { AvatarSize } from "../../beans";
-export declare class ZAvatar {
+export declare class ZAvatar implements ComponentInterface {
     /** [optional] Avatar size */
     size?: AvatarSize;
     /** [optional] Avatar text */

package/dist/types/components/z-book-cover/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * This component displays a book cover image,
  * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
@@ -10,7 +11,7 @@
  * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
  * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
  */
-export declare class ZBookCover {
+export declare class ZBookCover implements ComponentInterface {
     /** URL of the cover image. */
     cover: string;
     /** URL of the fallback cover image. */

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, Device } from "../../beans";
-export declare class ZBreadcrumb {
+export declare class ZBreadcrumb implements ComponentInterface {
     hostElement: HTMLZBreadcrumbElement;
     /** [optional] Sets the path style */
     pathStyle?: BreadcrumbPathStyle;

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

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition } from "../../beans";
 /**
  * @slot - button label
  */
-export declare class ZButton {
+export declare class ZButton implements ComponentInterface {
     hostElement: HTMLZButtonElement;
     /** defines a string value that labels the internal interactive element. Used for accessibility. */
     ariaLabel: string | undefined;
@@ -33,7 +34,9 @@ export declare class ZButton {
     iconPosition?: IconPosition;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     size?: ButtonSize | ControlSize;
-    private getAttributes;
+    private hasText;
+    componentWillLoad(): void;
+    private get attributes();
     private renderIcon;
     render(): HTMLAnchorElement | HTMLButtonElement;
 }

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

@@ -1,5 +1,5 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-export declare class ZButtonSort {
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+export declare class ZButtonSort implements ComponentInterface {
     /** id, should be unique */
     buttonid: string;
     /** label content (ascending) */

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

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { CardVariant } from "../../beans";
 /**
  * ZCard component.
@@ -16,7 +17,7 @@ import { CardVariant } from "../../beans";
  * @slot text
  * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of "footer", set `z-index: 0` on each of those elements.
  */
-export declare class ZCard {
+export declare class ZCard implements ComponentInterface {
     /**
      * Card variant.
      * Can be one of "text", "border", "shadow", "overlay".

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

@@ -1,4 +1,4 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
@@ -6,7 +6,7 @@ import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
  * @cssprop --z-carousel-items-shadow - The shadow around the items.
  * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
-export declare class ZCarousel {
+export declare class ZCarousel implements ComponentInterface {
     host: HTMLZCarouselElement;
     /** The z-carousel is on loading state */
     isLoading: boolean;
@@ -51,6 +51,9 @@ export declare class ZCarousel {
     onIndexChange(): void;
     onSingleModeChange(): void;
     onInfiniteModeChange(): void;
+    onLoadingChange(): void;
+    /** Set up all observers and listeners related to the rendered items. */
+    private setupObserversAndListeners;
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll

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

@@ -10,7 +10,7 @@ type ZCarouselStoriesArgs = ZCarousel & {
 /**
  * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).
  * Pass any number of elements inside its main `slot`.
- * @example```html
+ * @example```
  * <z-carousel>
  *  <li>element</li>
  *  <li>element</li>
@@ -19,7 +19,7 @@ type ZCarouselStoriesArgs = ZCarousel & {
  * ```
  * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.
  * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.
- * @example```css
+ * @example```
  * z-carousel {
  *  --z-carousel-gutter: calc(var(--space-unit) * 2);
  * }```

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ZChipType } from "../../beans";
-export declare class ZChip {
+export declare class ZChip implements ComponentInterface {
     el: HTMLZChipElement;
     /** Non interactive icon */
     icon?: string;

package/dist/types/components/z-color-picker/index.d.ts

@@ -1,10 +1,10 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ColorPickerPalette } from "../../beans";
 /**
  * Color picker component.
  * This component allows the user to pick a color from a predefined set.
  */
-export declare class ZColorPicker {
+export declare class ZColorPicker implements ComponentInterface {
     host: HTMLZColorPickerElement;
     /**
      * The selected color to highlight.

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ComboItem, ControlSize } from "../../beans";
-export declare class ZCombobox {
+export declare class ZCombobox implements ComponentInterface {
     element: HTMLZComboboxElement;
     /** input unique id */
     inputid: string;

package/dist/types/components/z-cover-hero/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
 /**
  * Cover hero component.
@@ -10,7 +11,7 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @cssprop --cover-hero-text-color - color of the text.
  * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
  */
-export declare class ZCoverHero {
+export declare class ZCoverHero implements ComponentInterface {
     host: HTMLZCoverHeroElement;
     /**
      * Cover hero variant. Can be `OVERLAY` or `STACKED`.

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

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { DividerOrientation, DividerSize } from "../../beans";
-export declare class ZDivider {
+export declare class ZDivider implements ComponentInterface {
     /** [optional] Divider size */
     size?: DividerSize;
     /** [optional] Divider color */

package/dist/types/components/z-ghost-loading/index.d.ts

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

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

@@ -1,8 +1,9 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
  */
-export declare class ZIcon {
+export declare class ZIcon implements ComponentInterface {
     /** Icon name */
     name: string;
     /** Icon height (optional) */

package/dist/types/components/z-info-box/index.d.ts

@@ -1,8 +1,8 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot content - set the info box content
  */
-export declare class ZInfoBox {
+export declare class ZInfoBox implements ComponentInterface {
     /** info box unique id */
     boxid: string;
     /** render close icon flag */

package/dist/types/components/z-info-reveal/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { ControlSize, InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
@@ -8,7 +9,7 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
  * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
  */
-export declare class ZInfoReveal {
+export declare class ZInfoReveal implements ComponentInterface {
     /** Name of the icon for the trigger button */
     icon?: string;
     /**

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

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
-export declare class ZInput {
+export declare class ZInput implements ComponentInterface {
     hostElement: HTMLZInputElement;
     /** the id of the input element */
     htmlid: string;

package/dist/types/components/z-input-message/index.d.ts

@@ -1,5 +1,6 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { InputStatus } from "../../beans";
-export declare class ZInputMessage {
+export declare class ZInputMessage implements ComponentInterface {
     /** input helper message */
     message: string;
     /** input status (optional) */

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

@@ -1,4 +1,5 @@
-export declare class ZLogo {
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class ZLogo implements ComponentInterface {
     /** image width */
     width?: number;
     /** image height */

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

@@ -1,11 +1,11 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.
  * @cssprop --z-menu-label-color - Color of the label's text.
  */
-export declare class ZMenu {
+export declare class ZMenu implements ComponentInterface {
     host: HTMLZMenuElement;
     /** Flag to set the active status of the menu. */
     active?: boolean;

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,11 @@
-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.
  */
-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 */

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) */