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

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

@@ -1,64 +1,11 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 /**
  * @slot title - Slot for the main title
  * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
- * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
- * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
- * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
- * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
- * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
- * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
- * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
- * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
- * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
- * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
- * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
- * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
- * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
- * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
- * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
- * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
- * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
- * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
- * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
- * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
- * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
- * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
- * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
- * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
- * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
- * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
- * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
- * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
- * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-height - Defaults to `auto`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
- * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
- * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
- * Defaults to `--app-header-typography-3-size`.
- * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
- * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-lineheight`.
- * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
- * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
- * Defaults to `--app-header-typography-3-tracking`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
-export declare class ZAppHeaderDeprecated {
+export declare class ZAppHeaderDeprecated implements ComponentInterface {
     hostElement: HTMLZAppHeaderDeprecatedElement;
     /**
      * Stuck mode for the header.

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

@@ -1,16 +1,12 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
 import { BookCardDeprecatedVariant } from "../../../beans";
 /**
  * @slot resources - books resources (extended variant only)
  * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
  * @slot tags - card tags (extended and search variant only)
  * @slot footer-cta - footer cta button (search and compact variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- * @cssprop --z-book-card-compact-width - compact card custom width
- * @cssprop --z-book-card-compact-height - compact card custom height
  */
-export declare class ZBookCardDeprecated {
+export declare class ZBookCardDeprecated implements ComponentInterface {
     hostElement: HTMLZBookCardDeprecatedElement;
     /**
      * Card variant: expanded, compact, search

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

@@ -1,11 +1,10 @@
-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. Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
-export declare class ZMenuDeprecated {
+export declare class ZMenuDeprecated implements ComponentInterface {
     hostElement: HTMLZMenuDeprecatedElement;
     /** Flag to set the active status of the menu. */
     active?: boolean;

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.
@@ -6,9 +7,8 @@ import { ZSectionTitleDividerPosition } from "../../../beans";
  * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
  * following its width and removing the one for the primary title.
  * @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";
@@ -5,9 +6,8 @@ import "../z-tr/index";
 /**
  * ZTable component.
  * @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,22 +1,15 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { AccordionVariant, ControlSize } from "../../beans";
 /**
  * Accordion component.
  *
  * @slot - Slot for the main content.
  * @slot tag - Slot for tags.
- * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
- * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
- * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
- * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
- * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
- * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
- * @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`.
+ * @part summary - The summary element that is always visible and acts as the accordion's toggle.
+ * @part content - The content element that is shown or hidden when the accordion is toggled.
  */
-export declare class ZAccordion {
+export declare class ZAccordion implements ComponentInterface {
+    host: HTMLZAccordionElement;
     /**
      * Text label.
      */
@@ -49,17 +42,21 @@ export declare class ZAccordion {
      * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.
      */
     shadow: boolean;
+    private hasSlottedTags;
     /**
      * Event fired when the accordion is toggled.
      */
     toggled: EventEmitter<boolean>;
     protected onDisabledChange(): void;
     private detailsElm;
+    /** Check if there is any content in the "tag" slot. */
+    private checkSlottedTags;
     /**
      * Handle `details` element toggle.
      * If currently disabled, prevent toggling by forcing the `open` state to `false`.
      * Unfortunately the "toggle" event is not cancelable and when catched, the `open` state is already changed.
      */
     private onDetailsToggle;
+    componentWillLoad(): void;
     render(): HTMLDetailsElement;
 }

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.
@@ -32,7 +33,7 @@ export declare class ZAnchorNavigation {
     collapsedLabel: string;
     /**
      * Explicitly collapse anchor navigation.
-     * If false will collapse automatically only on mobile.
+     * If false, it will collapse automatically only on mobile.
      */
     isCollapsed: boolean;
     /**

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

@@ -1,18 +1,12 @@
-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
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
- * @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.
@@ -27,10 +21,18 @@ export declare class ZAppHeader {
      * Enable the search bar.
      */
     enableSearch: boolean;
+    /**
+     * Visible label for the search bar.
+     */
+    searchLabel?: string;
     /**
      * 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-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.
@@ -5,12 +6,8 @@
  * Alignment of the image inside the container can be customized via CSS properties.
  *
  * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.
- * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
- * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
- * @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,13 +1,14 @@
+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;
     /**
-     * **Deprecated:** Use `htmlrole` instead.
+     * Use `htmlrole` instead.
      * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
      */
     role: string;
@@ -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,28 +1,22 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
 import { CardVariant } from "../../beans";
 /**
  * ZCard component.
  * The width of the card must be set by its container, following the grid indications of the design.
  *
- * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
- * @cssprop --z-card--border-color - Default: `var(--gray200)`
- * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-border-radius - Default: `none`
- * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
- * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
  * @slot cover - Image cover
  * @slot metadata - Metadata
  * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.
  * @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".
      * Leave it undefined for the default card.
      */
-    variant: CardVariant;
+    variant?: CardVariant;
     /** Name of the icon to place over the image cover */
     coverIcon: string;
     /** Enable shadow. Default: false. */

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

@@ -1,12 +1,10 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @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 +49,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-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;
@@ -66,6 +66,7 @@ export declare class ZCombobox {
     private filterItems;
     private closeFilterItems;
     private toggleComboBox;
+    private getHeaderAriaLabel;
     private getComboboxA11yAttributes;
     private renderHeader;
     private renderContent;

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.
@@ -6,11 +7,8 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @slot cover - slot for the cover image.
  * @slot content - slot for the content.
  * @slot info-reveal - slot for the info reveal.
- * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
- * @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`.