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

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

@@ -1,15 +1,17 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
-import { g as KeyboardCode } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { g as KeyboardCode } from './index-106473a8.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)}}`;
+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)}}";
+const ZTreeListStyle0 = stylesCss;
 
 const ZTreeList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.treeItemClicked = createEvent(this, "treeItemClicked", 7);
-        /** Items to render, if they have the url property they will be rendered as clickable links */
-        this.items = [];
         this.parsedItems = [];
+        this.items = [];
+        this.htmlAriaLabelledby = undefined;
+        this.htmlSectionTitle = undefined;
     }
     watchItems() {
         this.parsedItems = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -98,15 +100,15 @@ const ZTreeList = class {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'ca5b846e86140efd7a98028001e646349cc5683a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'eac955c253173abb6e5f0992d356311dc52f9ee6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '2dec1105883f67ec44180943079ad9bc3386102a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'bbe5bf141b17412719b230c4848a5aa2385a8adc', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "items": [{
-                "watchItems": 0
-            }]
+        "items": ["watchItems"]
     }; }
 };
-ZTreeList.style = stylesCss();
+ZTreeList.style = ZTreeListStyle0;
 
 export { ZTreeList as z_tree_list };
+
+//# sourceMappingURL=z-tree-list.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-tree-list.entry.js","mappings":"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","names":[],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n  padding-top: var(--space-unit);\n}\n\nz-list-element::before,\nz-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 0.125rem;\n  left: -0.5rem;\n  content: \"\";\n}\n\nz-list z-list-element::before {\n  width: var(--space-unit);\n  height: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-small) solid var(--color-disabled01-icon);\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element::after {\n  width: var(--space-unit);\n  height: 100%;\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element:last-child::after,\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  z-index: 100;\n  display: flex;\n  justify-content: space-between;\n  padding: 0;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\nz-list-element > .list-element.link-clickable {\n  color: var(--color-primary01);\n}\n\nz-list-element > .list-element.link-clickable:hover {\n  text-decoration: underline;\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -0.0625rem;\n  display: block;\n  width: 100%;\n  height: calc(var(--space-unit) * 5);\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label {\n  overflow: hidden;\n  flex-grow: 1;\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.0032rem;\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.item-label.bold-item {\n  font-weight: var(--font-sb);\n}\n\n.item.ellipsis {\n  display: flex;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n  padding-top: 0.125;\n  padding-left: calc(var(--space-unit) * 1.25);\n}\n\n.item-icon {\n  margin-right: var(--space-unit);\n}\n\n.no-icon-label {\n  padding-left: var(--space-unit);\n}\n\n.children-node > z-list-element.no-icon-elm {\n  padding-left: 0;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n  position: relative;\n  z-index: 200;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n@media (max-width: 767px) {\n  z-list-element::before,\n  z-list-element::after {\n    top: 0.1875rem;\n  }\n\n  z-list z-list-element::before {\n    height: calc(var(--space-unit) * 2.5);\n  }\n\n  .children-node > z-list-element {\n    padding-top: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +1,18 @@
-import { r as registerInstance, h } from './index-ByN2sYu6.js';
+import { r as registerInstance, h } from './index-c8ceadeb.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}`;
+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}";
+const ZVisuallyHiddenStyle0 = stylesCss;
 
 const ZVisuallyHidden = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: '7ddc72b3dc926a0205188bf75d5e42c15f913771' });
+        return h("slot", { key: 'b76451842cf32ab957ee81e9b689e94e35256524' });
     }
 };
-ZVisuallyHidden.style = stylesCss();
+ZVisuallyHidden.style = ZVisuallyHiddenStyle0;
 
 export { ZVisuallyHidden as z_visually_hidden };
+
+//# sourceMappingURL=z-visually-hidden.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-visually-hidden.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kKAAkK,CAAC;AACrL,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;","names":[],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { BookCardVariant } from "../../../beans";
 /**
  * @slot cta - Top right cta (e.g. bookmark icon)
@@ -15,7 +15,7 @@ import { BookCardVariant } from "../../../beans";
  * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
  * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
  */
-export declare class ZBookCard implements ComponentInterface {
+export declare class ZBookCard {
     hostElement: HTMLZBookCardElement;
     /** Card variant: landscape, portrait */
     variant: BookCardVariant;

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

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 /**
  * ZBookCardApp component
  * @cssprop --z-book-card-app-padding-x - set left and right padding
  * @cssprop --z-book-card-app-padding-y - set top and bottom padding
  */
-export declare class ZBookCardApp implements ComponentInterface {
+export declare class ZBookCardApp {
     hostElement: HTMLZBookCardAppElement;
     /**
      * App logo url

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { ZDatePickerMode, ZDatePickerPosition } from "../../../beans";
-export declare class ZDatePicker implements ComponentInterface {
+export declare class ZDatePicker {
     element: HTMLZDatePickerElement;
     /** unique id */
     datePickerId: string;

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { ZDatePickerPosition, ZRangePickerMode } from "../../../beans";
-export declare class ZRangePicker implements ComponentInterface {
+export declare class ZRangePicker {
     element: HTMLZRangePickerElement;
     /** unique id */
     rangePickerId: string;

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { 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.
@@ -58,7 +58,7 @@ import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtim
  * 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 implements ComponentInterface {
+export declare class ZAppHeaderDeprecated {
     hostElement: HTMLZAppHeaderDeprecatedElement;
     /**
      * Stuck mode for the header.

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { BookCardDeprecatedVariant } from "../../../beans";
 /**
  * @slot resources - books resources (extended variant only)
@@ -10,7 +10,7 @@ import { BookCardDeprecatedVariant } from "../../../beans";
  * @cssprop --z-book-card-compact-width - compact card custom width
  * @cssprop --z-book-card-compact-height - compact card custom height
  */
-export declare class ZBookCardDeprecated implements ComponentInterface {
+export declare class ZBookCardDeprecated {
     hostElement: HTMLZBookCardDeprecatedElement;
     /**
      * Card variant: expanded, compact, search

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

@@ -1,11 +1,11 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZMenuDeprecated {
     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 { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZMenuSectionDeprecated {
     hostElement: HTMLZMenuSectionDeprecatedElement;
     /** Active state */
     active?: boolean;

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../../stencil-public-runtime";
 import { ZSectionTitleDividerPosition } from "../../../beans";
 /**
  * Section title component.
@@ -9,7 +8,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 implements ComponentInterface {
+export declare class ZSectionTitle {
     /**
      * 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 { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
-export declare class ZDragdropArea implements ComponentInterface {
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class ZDragdropArea {
     /** 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 { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
-export declare class ZFile implements ComponentInterface {
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class ZFile {
     private icon;
     private ellipsis?;
     private chip?;

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

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { ButtonVariant, ZFileUploadType } from "../../../beans";
 export type ZFileUploadError = {
     cause: "format" | "size";
     message: string;
 };
-export declare class ZFileUpload implements ComponentInterface {
+export declare class ZFileUpload {
     /** 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,6 +1,5 @@
-import { ComponentInterface } from "../../../stencil-public-runtime";
 import { ListSize, ListType } from "../../../beans";
-export declare class ZList implements ComponentInterface {
+export declare class ZList {
     host: HTMLZListElement;
     /**
      * [optional] Sets size of inside elements.

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { TreeListItem } from "../../../beans";
-export declare class ZTreeList implements ComponentInterface {
+export declare class ZTreeList {
     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 { ComponentInterface, EventEmitter } from "../../../../stencil-public-runtime";
+import { EventEmitter } from "../../../../stencil-public-runtime";
 import { PopoverPosition, VisibilityCondition } from "../../../../beans";
 /**
  * ZTd component.
  * @slot - ZTd content.
  */
-export declare class ZTd implements ComponentInterface {
+export declare class ZTd {
     host: HTMLZTdElement;
     /**
      * Number of columns that the cell should span.

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

@@ -1,11 +1,10 @@
-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 implements ComponentInterface {
+export declare class ZTh {
     host: HTMLZThElement;
     /**
      * Number of columns that the cell should span.

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../../stencil-public-runtime";
 import "../z-tbody/index";
 import "../z-tfoot/index";
 import "../z-thead/index";
@@ -8,7 +7,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 implements ComponentInterface {
+export declare class ZTable {
     host: HTMLZTableElement;
     /**
      * Whether the table cells should show a border between them.

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

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

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

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

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

@@ -1,9 +1,8 @@
-import { ComponentInterface } from "../../../stencil-public-runtime";
 /**
  * ZThead component.
  * @slot - ZThead content (`z-tr`).
  */
-export declare class ZThead implements ComponentInterface {
+export declare class ZThead {
     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 { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZTr {
     host: HTMLZTrElement;
     /**
      * Whether the row is expandable.

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZAccordion {
     host: HTMLZAccordionElement;
     /**
      * Text label.

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

@@ -1,4 +1,3 @@
-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.
@@ -14,7 +13,7 @@ import { ComponentInterface } from "../../stencil-public-runtime";
  * </z-anchor-navigation>
  * ```
  */
-export declare class ZAnchorNavigation implements ComponentInterface {
+export declare class ZAnchorNavigation {
     /**
      * 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 { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 { ComponentInterface, 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 implements ComponentInterface {
+export declare class ZAppHeader {
     hostElement: HTMLZAppHeaderElement;
     /**
      * Stuck mode for the header.

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

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

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

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

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

@@ -1,4 +1,3 @@
-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.
@@ -11,7 +10,7 @@ import { ComponentInterface } from "../../stencil-public-runtime";
  * @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 implements ComponentInterface {
+export declare class ZBookCover {
     /** 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 { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, Device } from "../../beans";
-export declare class ZBreadcrumb implements ComponentInterface {
+export declare class ZBreadcrumb {
     hostElement: HTMLZBreadcrumbElement;
     /** [optional] Sets the path style */
     pathStyle?: BreadcrumbPathStyle;

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

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

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

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

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { CardVariant } from "../../beans";
 /**
  * ZCard component.
@@ -17,7 +16,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 implements ComponentInterface {
+export declare class ZCard {
     /**
      * Card variant.
      * Can be one of "text", "border", "shadow", "overlay".

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZCarousel {
     host: HTMLZCarouselElement;
     /** The z-carousel is on loading state */
     isLoading: boolean;
@@ -51,9 +51,6 @@ export declare class ZCarousel implements ComponentInterface {
     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```
+ * @example```html
  * <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```
+ * @example```css
  * z-carousel {
  *  --z-carousel-gutter: calc(var(--space-unit) * 2);
  * }```

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

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

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

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 implements ComponentInterface {
+export declare class ZColorPicker {
     host: HTMLZColorPickerElement;
     /**
      * The selected color to highlight.