@zanichelli/albe-web-components 12.4.0 → 12.4.1

package/dist/collection/components/z-breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n    }\n  }\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private triggerEllipsis: HTMLAnchorElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private totalLenght: number;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(isMobile: boolean): void {\n    if (isMobile) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.totalLenght = this.pathsList.length;\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));\n    this.collapsedElements = [];\n    if (this.totalLenght > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    if (this.pathListCopy.length > 0) {\n      for (let i = 0; i < this.pathsList.length; i++) {\n        if (this.pathsList[i].text.length > this.truncateChar) {\n          if (this.truncatePosition !== null) {\n            if (this.truncatePosition > 0) {\n              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);\n              arrayToPush.forEach((item) => {\n                this.collapsedElements.push(item);\n              });\n              this.pathsList.splice(0, this.truncatePosition);\n              this.truncatePosition = 0;\n\n              return;\n            }\n            if (this.truncatePosition === 0) {\n              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);\n              this.collapsedElements.push(...arrayToPush);\n              this.pathsList.splice(0, this.truncatePosition + 1);\n              this.truncatePosition = null;\n\n              return;\n            }\n          }\n          if (i !== this.pathsList.length - 1) {\n            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n            this.currentEllipsisText = this.pathsList[i].text;\n            this.pathsList[i].text = truncatedString;\n            this.pathsList[i].hasTooltip = true;\n            this.truncatePosition = i;\n\n            return;\n          }\n        }\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, length: number): string {\n    const ending = \"&mldr;\";\n\n    if (str.length > length) {\n      return str.substring(0, length - 1) + ending;\n    }\n\n    return str;\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderMobileBreadcrumb(): HTMLDivElement {\n    const lastPath = this.pathsList[this.pathsList.length - 1];\n\n    return (\n      <nav\n        aria-label=\"Breadcrumb\"\n        class={{\n          underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n        }}\n      >\n        <ol>{this.renderNode(lastPath, true)}</ol>\n      </nav>\n    );\n  }\n\n  private renderHomepageNode(item): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-icon\": this.homepageVariant === BreadcrumbHomepageVariant.ICON,\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={item.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n        >\n          {this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (\n            <z-icon\n              name=\"home\"\n              fill=\"color-link-primary\"\n              height={16}\n              width={16}\n            />\n          ) : (\n            \"Home\"\n          )}\n        </a>\n      </li>\n    );\n  }\n\n  private renderNode(item, mobile): HTMLLIElement {\n    return (\n      <li>\n        {item.hasTooltip && (\n          <z-popover\n            class=\"full-path-tooltip\"\n            bind-to={this.triggerEllipsis}\n            open={this.popoverEllipsisOpen}\n            position={PopoverPosition.BOTTOM_RIGHT}\n            closable={false}\n            showArrow\n          >\n            <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n          </z-popover>\n        )}\n        <a\n          class={{\n            \"missing-path\": !item.path,\n            \"text-ellipsis\": mobile,\n          }}\n          ref={(val) => (this.triggerEllipsis = val)}\n          aria-current={item.path ? undefined : \"page\"}\n          href={item.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n          onMouseOver={() => {\n            if (item.hasTooltip) {\n              this.popoverEllipsisOpen = true;\n            }\n          }}\n          onMouseLeave={() => {\n            if (item.hasTooltip) {\n              this.popoverEllipsisOpen = false;\n            }\n          }}\n          innerHTML={mobile ? `<z-icon fill=\"color-link-primary\" name=\"chevron-left\"></z-icon>${item.text}` : item.text}\n        />\n      </li>\n    );\n  }\n\n  private renderBreadcrumb(): HTMLElement {\n    return (\n      <nav\n        ref={(val) => (this.wrapElement = val)}\n        aria-label=\"Breadcrumb\"\n        class={{\n          underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n        }}\n      >\n        <ol>\n          {this.renderHomepageNode(this.homepageNode)}\n          {this.collapsedElements.length ? this.renderOverflowMenu() : \"\"}\n          {this.pathsList.map((item) => this.renderNode(item, false))}\n        </ol>\n      </nav>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    if (this.collapsedElements.length) {\n      return (\n        <li>\n          <z-popover\n            class=\"hidden-paths-popover\"\n            ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n            bind-to={this.triggerButton}\n            position={PopoverPosition.BOTTOM_RIGHT}\n            closable={true}\n            showArrow\n          >\n            <div class=\"popover-content\">\n              <z-list>\n                <z-list-group size={ListSize.SMALL}>\n                  {this.collapsedElements.map((item, index, array) => {\n                    return (\n                      <div>\n                        <z-list-element clickable>\n                          <a\n                            class=\"text-ellipsis\"\n                            href={item.path}\n                            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                            onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          >\n                            {item.text}\n                          </a>\n                        </z-list-element>\n                        {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                      </div>\n                    );\n                  })}\n                </z-list-group>\n              </z-list>\n            </div>\n          </z-popover>\n          <button\n            aria-label=\"Mostra più breadcrumb\"\n            aria-haspopup=\"true\"\n            ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n            class=\"dots\"\n            onClick={() => {\n              this.togglePopover();\n            }}\n            onKeyDown={(e) => {\n              handleKeyboardSubmit(e, this.togglePopover.bind(this));\n              setTimeout(() => {\n                this.anchorElements[0].focus();\n              }, 100);\n            }}\n          >\n            ...\n          </button>\n        </li>\n      );\n    }\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        {this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-breadcrumb/index.spec.js

@@ -0,0 +1,38 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZBreadcrumb } from "./index";
+describe("Suite test ZBreadcrumb", () => {
+    it("Test render ZBreadcrumb with passed children", async () => {
+        const page = await newSpecPage({
+            components: [ZBreadcrumb],
+            html: `<z-breadcrumb>
+        <a href="./link1">Link 1</a>
+        <a href="./link2">Link 2</a>
+      </z-breadcrumb>`,
+        });
+        expect(page.root).toEqualHtml(`<z-breadcrumb path-style="underlined" style="--line-clamp-popover: 0;">
+      <mock:shadow-root>
+        <nav aria-label="Breadcrumb" class="underlined">
+          <ol>
+            <li>
+              <a class="homepage-icon" href="http://testing.stenciljs.com/link1">
+                <z-icon fill="color-link-primary" height="16" name="home" width="16"></z-icon>
+              </a>
+            </li>
+            <li>
+              <a href="http://testing.stenciljs.com/link2">
+                Link 2
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </mock:shadow-root>
+      <a href="./link1">
+        Link 1
+      </a>
+      <a href="./link2">
+        Link 2
+      </a>
+    </z-breadcrumb>`);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/z-breadcrumb/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-breadcrumb/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;oBAuBd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZBreadcrumb} from \"./index\";\n\ndescribe(\"Suite test ZBreadcrumb\", () => {\n  it(\"Test render ZBreadcrumb with passed children\", async () => {\n    const page = await newSpecPage({\n      components: [ZBreadcrumb],\n      html: `<z-breadcrumb>\n        <a href=\"./link1\">Link 1</a>\n        <a href=\"./link2\">Link 2</a>\n      </z-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`<z-breadcrumb path-style=\"underlined\" style=\"--line-clamp-popover: 0;\">\n      <mock:shadow-root>\n        <nav aria-label=\"Breadcrumb\" class=\"underlined\">\n          <ol>\n            <li>\n              <a class=\"homepage-icon\" href=\"http://testing.stenciljs.com/link1\">\n                <z-icon fill=\"color-link-primary\" height=\"16\" name=\"home\" width=\"16\"></z-icon>\n              </a>\n            </li>\n            <li>\n              <a href=\"http://testing.stenciljs.com/link2\">\n                Link 2\n              </a>\n            </li>\n          </ol>\n        </nav>\n      </mock:shadow-root>\n      <a href=\"./link1\">\n        Link 1\n      </a>\n      <a href=\"./link2\">\n        Link 2\n      </a>\n    </z-breadcrumb>`);\n  });\n});\n"]}

package/dist/collection/components/z-card/index.js

@@ -9,140 +9,148 @@ import { CardVariant } from "../../beans";
  * @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 - Title
+ * @slot text - Text content
+ * @slot action - Actions
  */
 export class ZCard {
-  constructor() {
-    /** Enable shadow. Default: false. */
-    this.showShadow = false;
-    /** Enable 'clickable' style like hover and focus style. */
-    this.clickable = false;
-  }
-  componentWillLoad() {
-    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
-  }
-  /**
-   * Template for a card without image cover.
-   * A colored background replaces the image and some data is moved over it.
-   */
-  renderColorCoverCard() {
-    return [
-      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
-    ];
-  }
-  /**
-   * Template for the content div.
-   */
-  renderContentDiv() {
-    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
-  }
-  render() {
-    if (this.variant === CardVariant.TEXT) {
-      return h(Host, null, this.renderContentDiv());
+    constructor() {
+        this.variant = undefined;
+        this.coverIcon = undefined;
+        this.showShadow = false;
+        this.clickable = false;
+        this.hasCoverImage = undefined;
     }
-    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
-      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
-        h("slot", { name: "cover" }),
-        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+    componentWillLoad() {
+        this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
     }
-    return h(Host, null, this.renderColorCoverCard());
-  }
-  static get is() { return "z-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CardVariant",
-          "resolved": "CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT",
-          "references": {
-            "CardVariant": {
-              "location": "import",
-              "path": "../../beans"
+    /**
+     * Template for a card without image cover.
+     * A colored background replaces the image and some data is moved over it.
+     */
+    renderColorCoverCard() {
+        return [
+            h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+            h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
+        ];
+    }
+    /**
+     * Template for the content div.
+     */
+    renderContentDiv() {
+        return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
+    }
+    render() {
+        if (this.variant === CardVariant.TEXT) {
+            return h(Host, null, this.renderContentDiv());
+        }
+        if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+            return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+                h("slot", { name: "cover" }),
+                this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+        }
+        return h(Host, null, this.renderColorCoverCard());
+    }
+    static get is() { return "z-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardVariant",
+                    "resolved": "CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT",
+                    "references": {
+                        "CardVariant": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::CardVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
+                },
+                "attribute": "variant",
+                "reflect": true
+            },
+            "coverIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the icon to place over the image cover"
+                },
+                "attribute": "cover-icon",
+                "reflect": false
+            },
+            "showShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable shadow. Default: false."
+                },
+                "attribute": "show-shadow",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 'clickable' style like hover and focus style."
+                },
+                "attribute": "clickable",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
-        },
-        "attribute": "variant",
-        "reflect": true
-      },
-      "coverIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon to place over the image cover"
-        },
-        "attribute": "cover-icon",
-        "reflect": false
-      },
-      "showShadow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable shadow. Default: false."
-        },
-        "attribute": "show-shadow",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "clickable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable 'clickable' style like hover and focus style."
-        },
-        "attribute": "clickable",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasCoverImage": {}
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get states() {
+        return {
+            "hasCoverImage": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,gBAAgB,EAAE,CACnB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Element, State, Host} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable 'clickable' style like hover and focus style. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content div.\n   */\n  private renderContentDiv(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContentDiv()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContentDiv()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"]}

package/dist/collection/components/z-card/index.spec.js

@@ -0,0 +1,160 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZCard } from "./index";
+describe("Suite test ZCard", () => {
+    it("Test render ZCard with cover", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `<z-card>
+        <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg" />
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+        <z-icon name="share" slot="action"></z-icon>
+        <z-icon name="delete" slot="action"></z-icon>
+      </z-card>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-card>
+        <mock:shadow-root>
+          <div class="cover-container">
+            <slot name="cover"></slot>
+          </div>
+          <div class="content">
+            <slot name="metadata"></slot>
+            <slot name="title"></slot>
+            <slot name="text"></slot>
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg" />
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+        <z-icon name="share" slot="action"></z-icon>
+        <z-icon name="delete" slot="action"></z-icon>
+      </z-card>
+    `);
+    });
+    it("Test render ZCard with cover and icon", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `<z-card cover-icon="play-filled">
+        <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg" />
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+        <z-icon name="share" slot="action"></z-icon>
+        <z-icon name="delete" slot="action"></z-icon>
+      </z-card>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-card cover-icon="play-filled">
+        <mock:shadow-root>
+          <div class="cover-container">
+            <slot name="cover"></slot>
+            <z-icon name="play-filled"></z-icon>
+          </div>
+          <div class="content">
+            <slot name="metadata"></slot>
+            <slot name="title"></slot>
+            <slot name="text"></slot>
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg" />
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+        <z-icon name="share" slot="action"></z-icon>
+        <z-icon name="delete" slot="action"></z-icon>
+      </z-card>
+    `);
+    });
+    it("Test render ZCard with color cover", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `<z-card>
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+      </z-card>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-card>
+        <mock:shadow-root>
+          <div class="cover-container">
+            <div class="color-cover">
+              <div class="cover-content">
+                <slot name="metadata"></slot>
+                <slot name="title"></slot>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <slot name="text"></slot>
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Description</p>
+      </z-card>
+    `);
+    });
+    it("Test ZCard text variant", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `
+        <z-card clickable variant="text" showshadow style="border: 1px solid black;">
+          <h2 class="body-5" slot="metadata">metadata</h2>
+          <h3 slot="title">Card title</h3>
+          <p class="body-3" slot="text">Some description for the content of the card. </p>
+
+          <z-icon name="share" slot="action" fill="color-primary01"></z-icon>
+          <z-icon name="delete" slot="action" fill="color-primary01"></z-icon>
+        </z-card>
+      `,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-card clickable variant="text" showshadow style="border: 1px solid black;">
+        <mock:shadow-root>
+          <div class="content">
+            <slot name="metadata"></slot>
+            <slot name="title"></slot>
+            <slot name="text"></slot>
+            <div class="actions">
+              <slot name="action"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <h3 slot="title">Card title</h3>
+        <p class="body-3" slot="text">Some description for the content of the card. </p>
+        <z-icon name="share" slot="action" fill="color-primary01"></z-icon>
+        <z-icon name="delete" slot="action" fill="color-primary01"></z-icon>
+      </z-card>
+    `);
+    });
+    it("Test ZCard clickable click", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `<z-card>
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <button id="btn" slot="title">Card title</button>
+        <p class="body-3" slot="text">Description</p>
+      </z-card>`,
+        });
+        const btn = page.body.querySelector("#btn");
+        const buttonClickedCallback = jest.fn();
+        page.doc.addEventListener("click", buttonClickedCallback);
+        btn.click();
+        expect(buttonClickedCallback).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/z-card/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-card/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;gBAOI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;gBAOI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;gBAII;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;;;OASL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;gBAII;SACX,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAsB,CAAC;QACjE,MAAM,qBAAqB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACxC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;QAC1D,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCard} from \"./index\";\n\ndescribe(\"Suite test ZCard\", () => {\n  it(\"Test render ZCard with cover\", async () => {\n    const page = await newSpecPage({\n      components: [ZCard],\n      html: `<z-card>\n        <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n        <z-icon name=\"share\" slot=\"action\"></z-icon>\n        <z-icon name=\"delete\" slot=\"action\"></z-icon>\n      </z-card>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-card>\n        <mock:shadow-root>\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n          </div>\n          <div class=\"content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n            <slot name=\"text\"></slot>\n            <div class=\"actions\">\n              <slot name=\"action\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n        <z-icon name=\"share\" slot=\"action\"></z-icon>\n        <z-icon name=\"delete\" slot=\"action\"></z-icon>\n      </z-card>\n    `);\n  });\n\n  it(\"Test render ZCard with cover and icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZCard],\n      html: `<z-card cover-icon=\"play-filled\">\n        <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n        <z-icon name=\"share\" slot=\"action\"></z-icon>\n        <z-icon name=\"delete\" slot=\"action\"></z-icon>\n      </z-card>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-card cover-icon=\"play-filled\">\n        <mock:shadow-root>\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n            <z-icon name=\"play-filled\"></z-icon>\n          </div>\n          <div class=\"content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n            <slot name=\"text\"></slot>\n            <div class=\"actions\">\n              <slot name=\"action\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n        <z-icon name=\"share\" slot=\"action\"></z-icon>\n        <z-icon name=\"delete\" slot=\"action\"></z-icon>\n      </z-card>\n    `);\n  });\n\n  it(\"Test render ZCard with color cover\", async () => {\n    const page = await newSpecPage({\n      components: [ZCard],\n      html: `<z-card>\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n      </z-card>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-card>\n        <mock:shadow-root>\n          <div class=\"cover-container\">\n            <div class=\"color-cover\">\n              <div class=\"cover-content\">\n                <slot name=\"metadata\"></slot>\n                <slot name=\"title\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <slot name=\"text\"></slot>\n            <div class=\"actions\">\n              <slot name=\"action\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n      </z-card>\n    `);\n  });\n\n  it(\"Test ZCard text variant\", async () => {\n    const page = await newSpecPage({\n      components: [ZCard],\n      html: `\n        <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n          <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n          <h3 slot=\"title\">Card title</h3>\n          <p class=\"body-3\" slot=\"text\">Some description for the content of the card. </p>\n\n          <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n          <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n        </z-card>\n      `,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n        <mock:shadow-root>\n          <div class=\"content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n            <slot name=\"text\"></slot>\n            <div class=\"actions\">\n              <slot name=\"action\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <h3 slot=\"title\">Card title</h3>\n        <p class=\"body-3\" slot=\"text\">Some description for the content of the card. </p>\n        <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n        <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n      </z-card>\n    `);\n  });\n\n  it(\"Test ZCard clickable click\", async () => {\n    const page = await newSpecPage({\n      components: [ZCard],\n      html: `<z-card>\n        <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n        <button id=\"btn\" slot=\"title\">Card title</button>\n        <p class=\"body-3\" slot=\"text\">Description</p>\n      </z-card>`,\n    });\n\n    const btn = page.body.querySelector(\"#btn\") as HTMLButtonElement;\n    const buttonClickedCallback = jest.fn();\n    page.doc.addEventListener(\"click\", buttonClickedCallback);\n    btn.click();\n\n    expect(buttonClickedCallback).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/z-card/styles.css

@@ -77,7 +77,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
 ::slotted([slot="metadata"]),
 ::slotted([slot="title"]),
 ::slotted([slot="text"]) {
-  display: box;
+  display: -webkit-inline-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
 }