@zanichelli/albe-web-components 18.7.7 → 18.8.0

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

@@ -10,23 +10,16 @@ const StoryMeta = {
     title: "ZBookCard/ZBookCard",
     component: "z-book-card",
     argTypes: {
-        "variant": {
+        variant: {
             control: {
                 type: "inline-radio",
             },
             options: Object.values(BookCardVariant),
         },
-        "--z-book-card-portrait-cover-height": { control: { type: "text" } },
-        "--z-book-card-title-lines": { control: { type: "text" } },
-        "--z-book-card-title-word-break": { control: { type: "text" } },
-        "--z-book-card-subtitle-lines": { control: { type: "text" } },
-        "--z-book-card-subtitle-word-break": { control: { type: "text" } },
-        "--z-book-card-authors-lines": { control: { type: "text" } },
-        "--z-book-card-authors-word-break": { control: { type: "text" } },
     },
     args: {
         "variant": BookCardVariant.LANDSCAPE,
-        "cover": "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg",
+        "cover": "https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg",
         "operaTitle": "Matematica.azzurro",
         "volumeTitle": "Volume 3 con Tutor",
         "authors": "Massimo Bergamini, Anna Trifone, Graziella Barozzi",
@@ -35,7 +28,9 @@ const StoryMeta = {
         "year": "2025",
         "ebookUrl": "https://www.zanichelli.it/ricerca",
         "fallbackCover": "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-        "titleHtmlTag": null,
+        "titleHtmlTag": undefined,
+        "hasMultipleCovers": false,
+        "linkTarget": "_blank",
         "--z-book-card-portrait-cover-height": "378px",
         "--z-book-card-title-lines": "2",
         "--z-book-card-title-word-break": "initial",
@@ -48,7 +43,7 @@ const StoryMeta = {
 export default StoryMeta;
 export const Card = {
     render: (args) => html `<z-book-card
-      variant=${args.variant}
+      .variant=${args.variant}
       cover=${args.cover}
       authors=${args.authors}
       opera-title=${args.operaTitle}
@@ -59,6 +54,8 @@ export const Card = {
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
       title-html-tag=${args.titleHtmlTag}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      link-target=${args.linkTarget}
       style=${styleMap({
         "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
         "--z-book-card-title-lines": args["--z-book-card-title-lines"],
@@ -73,7 +70,7 @@ export const Card = {
 export const WithSlottedContent = {
     render: (args) => html `<z-book-card
       variant=${args.variant}
-      cover=${args.cover}
+      .cover=${args.cover}
       authors=${args.authors}
       opera-title=${args.operaTitle}
       volume-title=${args.volumeTitle}
@@ -83,6 +80,8 @@ export const WithSlottedContent = {
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
       title-html-tag=${args.titleHtmlTag}
+      .hasMultipleCovers=${args.hasMultipleCovers}
+      link-target=${args.linkTarget}
       style=${styleMap({
         "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
         "--z-book-card-title-lines": args["--z-book-card-title-lines"],
@@ -155,7 +154,6 @@ export const WithSlottedContent = {
       <div
         slot="coverOverlay"
         class="body-4-sb"
-        style="text-align: center; padding: 16px 0;"
       >
         ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard &\n  CSSVarsArguments<\n    | \"--z-book-card-portrait-cover-height\"\n    | \"--z-book-card-title-lines\"\n    | \"--z-book-card-title-word-break\"\n    | \"--z-book-card-subtitle-lines\"\n    | \"--z-book-card-subtitle-word-break\"\n    | \"--z-book-card-authors-lines\"\n    | \"--z-book-card-authors-word-break\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n    \"--z-book-card-portrait-cover-height\": {control: {type: \"text\"}},\n    \"--z-book-card-title-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-title-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-word-break\": {control: {type: \"text\"}},\n  },\n  args: {\n    \"variant\": BookCardVariant.LANDSCAPE,\n    \"cover\": \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n    \"operaTitle\": \"Matematica.azzurro\",\n    \"volumeTitle\": \"Volume 3 con Tutor\",\n    \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    \"isbn\": \"9788808930552\",\n    \"isbnLabel\": \"(ed. cartacea)\",\n    \"year\": \"2025\",\n    \"ebookUrl\": \"https://www.zanichelli.it/ricerca\",\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"titleHtmlTag\": null,\n    \"--z-book-card-portrait-cover-height\": \"378px\",\n    \"--z-book-card-title-lines\": \"2\",\n    \"--z-book-card-title-word-break\": \"initial\",\n    \"--z-book-card-subtitle-lines\": \"1\",\n    \"--z-book-card-subtitle-word-break\": \"break-all\",\n    \"--z-book-card-authors-lines\": \"1\",\n    \"--z-book-card-authors-word-break\": \"break-all\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"cursor: pointer; fill: var(--blue500);\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"primary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n\n      <div slot=\"tags\">\n        <z-tag style=\"--z-tag-bg: var(--gray500);\">EDIZIONE DIGITALE INSEGNANTE</z-tag>\n        <z-tag style=\"--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);\">BES</z-tag>\n      </div>\n\n      <div slot=\"data\">\n        <a\n          href=\"https://www.zanichelli.it\"\n          class=\"catalog-link z-link z-link-blue z-link-icon body-4-sb\"\n          >Scheda catalogo\n          <z-icon\n            name=\"arrow-quad-north-east\"\n            width=\"14\"\n            height=\"14\"\n          ></z-icon>\n        </a>\n        <div\n          class=\"body-5-sb\"\n          style=\"padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;\"\n        >\n          ADOTTATO\n        </div>\n      </div>\n\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n      </div>\n\n      <div\n        slot=\"coverOverlay\"\n        class=\"body-4-sb\"\n        style=\"text-align: center; padding: 16px 0;\"\n      >\n        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI\n      </div>\n\n      <style>\n        z-book-card-app {\n          --z-book-card-app-padding-x: 8px;\n          width: 100%;\n          max-width: 100%;\n          height: 47px;\n\n          @media (min-width: 768px) {\n            --z-book-card-app-padding-x: 16px;\n            width: 315px;\n          }\n        }\n      </style>\n    </z-book-card>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard &\n  CSSVarsArguments<\n    | \"--z-book-card-portrait-cover-height\"\n    | \"--z-book-card-title-lines\"\n    | \"--z-book-card-title-word-break\"\n    | \"--z-book-card-subtitle-lines\"\n    | \"--z-book-card-subtitle-word-break\"\n    | \"--z-book-card-authors-lines\"\n    | \"--z-book-card-authors-word-break\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n  },\n  args: {\n    \"variant\": BookCardVariant.LANDSCAPE,\n    \"cover\": \"https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg\",\n    \"operaTitle\": \"Matematica.azzurro\",\n    \"volumeTitle\": \"Volume 3 con Tutor\",\n    \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    \"isbn\": \"9788808930552\",\n    \"isbnLabel\": \"(ed. cartacea)\",\n    \"year\": \"2025\",\n    \"ebookUrl\": \"https://www.zanichelli.it/ricerca\",\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"titleHtmlTag\": undefined,\n    \"hasMultipleCovers\": false,\n    \"linkTarget\": \"_blank\",\n    \"--z-book-card-portrait-cover-height\": \"378px\",\n    \"--z-book-card-title-lines\": \"2\",\n    \"--z-book-card-title-word-break\": \"initial\",\n    \"--z-book-card-subtitle-lines\": \"1\",\n    \"--z-book-card-subtitle-word-break\": \"break-all\",\n    \"--z-book-card-authors-lines\": \"1\",\n    \"--z-book-card-authors-word-break\": \"break-all\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      .variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      link-target=${args.linkTarget}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      .cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      .hasMultipleCovers=${args.hasMultipleCovers}\n      link-target=${args.linkTarget}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"cursor: pointer; fill: var(--blue500);\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"primary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n\n      <div slot=\"tags\">\n        <z-tag style=\"--z-tag-bg: var(--gray500);\">EDIZIONE DIGITALE INSEGNANTE</z-tag>\n        <z-tag style=\"--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);\">BES</z-tag>\n      </div>\n\n      <div slot=\"data\">\n        <a\n          href=\"https://www.zanichelli.it\"\n          class=\"catalog-link z-link z-link-blue z-link-icon body-4-sb\"\n          >Scheda catalogo\n          <z-icon\n            name=\"arrow-quad-north-east\"\n            width=\"14\"\n            height=\"14\"\n          ></z-icon>\n        </a>\n        <div\n          class=\"body-5-sb\"\n          style=\"padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;\"\n        >\n          ADOTTATO\n        </div>\n      </div>\n\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n      </div>\n\n      <div\n        slot=\"coverOverlay\"\n        class=\"body-4-sb\"\n      >\n        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI\n      </div>\n\n      <style>\n        z-book-card-app {\n          --z-book-card-app-padding-x: 8px;\n          width: 100%;\n          max-width: 100%;\n          height: 47px;\n\n          @media (min-width: 768px) {\n            --z-book-card-app-padding-x: 16px;\n            width: 315px;\n          }\n        }\n      </style>\n    </z-book-card>`,\n} satisfies Story;\n"]}

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

@@ -18,59 +18,37 @@
   font-family: var(--font-family-sans);
 }
 
-:host .main-content {
+:host,
+* {
+  box-sizing: border-box;
+}
+
+.main-content {
   display: flex;
   height: 100%;
-  box-sizing: border-box;
   flex-direction: column;
   padding: var(--space-unit);
   gap: var(--space-unit);
 }
 
-:host .main-content .cover {
+.main-content .cover {
   position: relative;
   display: flex;
   overflow: hidden;
-  height: var(--z-book-card-portrait-cover-height);
   align-items: flex-end;
-  background: var(--color-white);
   border-radius: var(--border-radius);
 }
 
-:host .main-content .cover:focus-within {
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+.main-content .cover z-book-cover {
+  --z-book-cover-height: var(--z-book-card-portrait-cover-height);
 }
 
-:host .main-content .cover a {
-  display: inline-flex;
-  outline: none;
-}
-
-:host .main-content .cover img {
-  max-width: 100%;
-  max-height: 100%;
+.main-content a.cover:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
-::slotted([slot="coverOverlay"]) {
-  position: absolute;
-  bottom: 0;
-  overflow: hidden;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--space-unit);
-  background-color: var(--avatar-C19);
-  color: var(--color-white);
-}
-
-:host .main-content .cover ::slotted([slot="coverOverlay"]) {
-  min-height: 80px;
-  max-height: 336px;
-}
-
-:host .main-content .card-info {
+.main-content .card-info {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -78,24 +56,24 @@
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .top {
+.main-content .card-info .top {
   display: flex;
   flex-direction: column;
   gap: calc(var(--space-unit) * 2);
 }
 
-:host .main-content .card-info .top ::slotted([slot="tags"]) {
+.main-content .card-info .top ::slotted([slot="tags"]) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .top ::slotted([slot="data"]) {
+.main-content .card-info .top ::slotted([slot="data"]) {
   display: flex;
   justify-content: space-between;
 }
 
-:host .main-content .card-info .top .ellipsis {
+.main-content .card-info .top .ellipsis {
   display: -webkit-box;
   overflow: hidden;
   height: 1.4rem;
@@ -107,46 +85,49 @@
   word-break: break-all;
 }
 
-:host .main-content .card-info .top .ellipsis.opera-title {
-  height: calc(1.5 * var(--z-book-card-title-lines)) rem;
+.main-content .card-info .top .ellipsis.opera-title {
+  height: auto;
+  max-height: calc(1.5rem * var(--z-book-card-title-lines));
   -webkit-line-clamp: var(--z-book-card-title-lines);
   line-clamp: var(--z-book-card-title-lines);
   line-height: 1.5rem;
   word-break: var(--z-book-card-title-word-break);
 }
 
-:host .main-content .card-info .top .ellipsis.volume-title {
-  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;
+.main-content .card-info .top .ellipsis.volume-title {
+  height: auto;
+  max-height: calc(1.4rem * var(--z-book-card-subtitle-lines));
   -webkit-line-clamp: var(--z-book-card-subtitle-lines);
   line-clamp: var(--z-book-card-subtitle-lines);
   line-height: 1.4rem;
   word-break: var(--z-book-card-subtitle-word-break);
 }
 
-:host .main-content .card-info .top .ellipsis.authors {
-  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;
+.main-content .card-info .top .ellipsis.authors {
+  height: auto;
+  max-height: calc(1.4rem * var(--z-book-card-authors-lines));
   -webkit-line-clamp: var(--z-book-card-authors-lines);
   line-clamp: var(--z-book-card-authors-lines);
   line-height: 1.4rem;
   word-break: var(--z-book-card-authors-word-break);
 }
 
-:host .main-content .card-info .top .opera-title * {
+.main-content .card-info .top .opera-title * {
   all: unset;
 }
 
-:host .main-content .cta-wrapper {
+.main-content .cta-wrapper {
   display: flex;
   justify-content: space-between;
   gap: calc(var(--space-unit) / 2);
 }
 
-:host .main-content .card-info .top .link-chip-wrapper {
+.main-content .card-info .top .link-chip-wrapper {
   display: flex;
   justify-content: space-between;
 }
 
-:host .main-content .card-info .bottom .ebook {
+.main-content .card-info .bottom .ebook {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -157,7 +138,7 @@
   gap: var(--space-unit);
 }
 
-:host .main-content .card-info .bottom .ebook .app-name {
+.main-content .card-info .bottom .ebook .app-name {
   display: flex;
   align-items: center;
   padding: calc(var(--space-unit) / 2) 0;
@@ -165,43 +146,30 @@
   gap: calc(var(--space-unit) / 2);
 }
 
-:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {
+.main-content .card-info .bottom .ebook .app-name .ebook-logo {
   width: 1.5rem;
   height: 1.5rem;
   content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 }
 
 :host([variant="landscape"]) {
-  width: 635px;
+  width: 637px;
   min-height: max(332px, 20.75rem);
   padding: 0;
 }
 
 :host([variant="landscape"]) .main-content {
   min-height: max(332px, 20.75rem);
-  box-sizing: border-box;
   flex-direction: row;
   padding: calc(var(--space-unit) * 2);
   gap: calc(var(--space-unit) * 2);
 }
 
-:host([variant="landscape"]) .main-content .cover {
-  display: flex;
-  overflow: hidden;
-  width: 221px;
-  height: 300px;
-  margin: 0;
-}
-
-:host([variant="landscape"]) .main-content .cover ::slotted([slot="coverOverlay"]) {
-  min-height: 80px;
-  max-height: 256px;
-}
-
-:host([variant="landscape"]) .main-content .card-info {
-  gap: calc(var(--space-unit) / 2);
+:host([variant="landscape"]) .main-content .cover z-book-cover {
+  --z-book-cover-height: 300px;
 }
 
+:host([variant="landscape"]) .main-content .card-info,
 :host([variant="landscape"]) .main-content .card-info .top {
   gap: calc(var(--space-unit) / 2);
 }

package/dist/collection/components/z-book-cover/index.js

@@ -0,0 +1,113 @@
+import { Fragment, Host, h } from "@stencil/core";
+import defaultFallbackCover from "../../assets/images/png/placeholder-cover.png";
+/**
+ * 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.
+ * The aspect ratio of the cover image is preserved.
+ * 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 class ZBookCover {
+    constructor() {
+        this.cover = undefined;
+        this.fallbackCover = undefined;
+        this.multiple = false;
+        this.bordered = false;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '68d64d604da888608345f2ce5ca0c5936ab395a7' }, this.multiple && (h(Fragment, { key: 'ce48dbba436fd9fa9cfbda1b96880394b78bf6bc' }, h("div", { key: '50b4efc239d5a89cd224c4c3e78bd09544ae5a58', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'aec43bf969d4b7f14c8eae78bd616c3fbcc8cdbc', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: 'd8c3f8f22e338f112cbede47f5cfbce61a018d5c', class: "cover-container" }, h("img", { key: '35fd6b50c3fbf63bd9e20e02be81348a45c448eb', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '56dd2c69edcc18052667a71c09f9157e979617c0', name: "coverOverlay" }))));
+    }
+    static get is() { return "z-book-cover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the cover image."
+                },
+                "attribute": "cover",
+                "reflect": false
+            },
+            "fallbackCover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the fallback cover image."
+                },
+                "attribute": "fallback-cover",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a stack of covers to represent multiple books."
+                },
+                "attribute": "multiple",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to apply a border around the cover image (always applied when `multiple` is enabled)."
+                },
+                "attribute": "bordered",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-book-cover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-book-cover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,oBAAoB,MAAM,+CAA+C,CAAC;AAEjF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,UAAU;;;;wBAWV,KAAK;wBAIL,KAAK;;IAEhB,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,CAChB,EAAC,QAAQ;gBACP,4DAAK,KAAK,EAAC,mCAAmC,GAAO;gBACrD,4DAAK,KAAK,EAAC,mCAAmC,GAAO,CAC5C,CACZ;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DACE,GAAG,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,oBAAoB,iBAC3B,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,oBAAoB,CAAC,GACxE;gBACF,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Fragment, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../assets/images/png/placeholder-cover.png\";\n\n/**\n * This component displays a book cover image,\n * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.\n * The aspect ratio of the cover image is preserved.\n * Alignment of the image inside the container can be customized via CSS properties.\n *\n * @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.\n * @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.\n * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)\n * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)\n * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)\n */\n@Component({\n  tag: \"z-book-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCover {\n  /** URL of the cover image. */\n  @Prop()\n  cover: string;\n\n  /** URL of the fallback cover image. */\n  @Prop()\n  fallbackCover: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop({reflect: true})\n  multiple = false;\n\n  /** Whether to apply a border around the cover image (always applied when `multiple` is enabled). */\n  @Prop({reflect: true})\n  bordered = false;\n\n  render(): HTMLZBookCoverElement {\n    return (\n      <Host>\n        {this.multiple && (\n          <Fragment>\n            <div class=\"shifted-stack-cover stack-cover-2\"></div>\n            <div class=\"shifted-stack-cover stack-cover-1\"></div>\n          </Fragment>\n        )}\n        <div class=\"cover-container\">\n          <img\n            src={this.cover ?? defaultFallbackCover}\n            aria-hidden=\"true\"\n            alt=\"\"\n            onError={() => (this.cover = this.fallbackCover || defaultFallbackCover)}\n          />\n          <slot name=\"coverOverlay\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-book-cover/index.stories.js

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import "./index";
+const StoryMeta = {
+    title: "ZBookCover",
+    component: "z-book-cover",
+    args: {
+        "cover": "https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg",
+        "bordered": false,
+        "multiple": false,
+        "--z-book-cover-height": "378px",
+        "--z-book-cover-border-radius": "var(--border-radius)",
+        "--z-book-cover-stack-shift-x": "8px",
+        "--z-book-cover-stack-shift-y": "12px",
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `<z-book-cover
+      cover=${args.cover}
+      .bordered=${args.bordered}
+      .multiple=${args.multiple}
+      style=${styleMap({
+        "--z-book-cover-height": args["--z-book-cover-height"],
+        "--z-book-cover-border-radius": args["--z-book-cover-border-radius"],
+        "--z-book-cover-stack-shift-x": args["--z-book-cover-stack-shift-x"],
+        "--z-book-cover-stack-shift-y": args["--z-book-cover-stack-shift-y"],
+    })}
+    ></z-book-cover>`,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-book-cover/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-book-cover/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,SAAS,CAAC;AAUjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,OAAO,EAAE,6EAA6E;QACtF,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,uBAAuB,EAAE,OAAO;QAChC,8BAA8B,EAAE,sBAAsB;QACtD,8BAA8B,EAAE,KAAK;QACrC,8BAA8B,EAAE,MAAM;KACvC;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;cACjB,QAAQ,CAAC;QACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,CAAC;QACtD,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;QACpE,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;QACpE,8BAA8B,EAAE,IAAI,CAAC,8BAA8B,CAAC;KACrE,CAAC;qBACa;CACJ,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZBookCover} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZBookCoverStoriesArgs = ZBookCover &\n  CSSVarsArguments<\n    | \"--z-book-cover-height\"\n    | \"--z-book-cover-border-radius\"\n    | \"--z-book-cover-stack-shift-x\"\n    | \"--z-book-cover-stack-shift-y\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCover\",\n  component: \"z-book-cover\",\n  args: {\n    \"cover\": \"https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg\",\n    \"bordered\": false,\n    \"multiple\": false,\n    \"--z-book-cover-height\": \"378px\",\n    \"--z-book-cover-border-radius\": \"var(--border-radius)\",\n    \"--z-book-cover-stack-shift-x\": \"8px\",\n    \"--z-book-cover-stack-shift-y\": \"12px\",\n  },\n} satisfies Meta<ZBookCoverStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCoverStoriesArgs>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-book-cover\n      cover=${args.cover}\n      .bordered=${args.bordered}\n      .multiple=${args.multiple}\n      style=${styleMap({\n        \"--z-book-cover-height\": args[\"--z-book-cover-height\"],\n        \"--z-book-cover-border-radius\": args[\"--z-book-cover-border-radius\"],\n        \"--z-book-cover-stack-shift-x\": args[\"--z-book-cover-stack-shift-x\"],\n        \"--z-book-cover-stack-shift-y\": args[\"--z-book-cover-stack-shift-y\"],\n      })}\n    ></z-book-cover>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-book-cover/styles.css

@@ -0,0 +1,95 @@
+:host,
+*,
+::slotted(*) {
+  box-sizing: border-box;
+}
+
+:host {
+  --z-book-cover-height: 378px;
+  --z-book-cover-border-radius: var(--border-radius);
+  --z-book-cover-stack-shift-x: 8px;
+  --z-book-cover-stack-shift-y: 12px;
+  --private_book-cover-width: round(nearest, var(--z-book-cover-height) / 1.33, 1px);
+
+  position: relative;
+  display: flex;
+  width: var(--private_book-cover-width);
+  max-width: 100%;
+  height: var(--z-book-cover-height);
+  max-height: 100%;
+}
+
+@supports not (width: round(1px, 1px)) {
+  /* If the `round()` function isn't supported, fallback to the float value */
+  :host {
+    --private_book-cover-width: calc(var(--z-book-cover-height) / 1.33);
+  }
+}
+
+:host > * {
+  z-index: 0;
+  background: var(--color-surface01);
+}
+
+.cover-container {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  align-items: start;
+  justify-content: center;
+  border-radius: var(--z-book-cover-border-radius);
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+:host([multiple]) {
+  width: calc(var(--private_book-cover-width) - (var(--z-book-cover-stack-shift-x) * 2));
+  height: calc(var(--z-book-cover-height) - (var(--z-book-cover-stack-shift-y) * 2));
+  margin-bottom: calc(var(--z-book-cover-stack-shift-y) * 2);
+  margin-left: calc(var(--z-book-cover-stack-shift-x) * 2);
+}
+
+:host([bordered]) .cover-container,
+:host([multiple]) .cover-container {
+  border: var(--border-size-small) solid var(--color-surface05);
+}
+
+.shifted-stack-cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: var(--border-size-small) solid var(--color-surface05);
+  border-radius: var(--z-book-cover-border-radius);
+}
+
+.shifted-stack-cover.stack-cover-1 {
+  top: var(--z-book-cover-stack-shift-y);
+  left: calc(-1 * var(--z-book-cover-stack-shift-x));
+}
+
+.shifted-stack-cover.stack-cover-2 {
+  top: calc(var(--z-book-cover-stack-shift-y) * 2);
+  left: calc(var(--z-book-cover-stack-shift-x) * -2);
+}
+
+::slotted([slot="coverOverlay"]) {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  min-height: 80px;
+  max-height: 85%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-unit);
+  background-color: var(--avatar-C19);
+  color: var(--color-white);
+  overflow-wrap: anywhere;
+  text-align: center;
+}

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

@@ -199,10 +199,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: 'fa72961ddc0531498b74d9837cd29a068674d93d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '710553da61a2d791900ace442f879854c1bc0be0', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'dfdce7063e125f7f2a04be854aa0104f3b5f8c97', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '4cab944188a1a308715f46d2d8d996c69219f6f2', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '2359ccdab15d71eaed8ebd6dfa463980e5c37b6d' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '1c549b867f77a75eb67a5ed35f389a98761ae70d' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-button-sort/index.js

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6dd4d7f96cf0c8f77f50350113a078ef90ab6a58', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '3307af9351e08954162418cef02cd5ec68d46703', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '9754930a0995c2107c57e52daa99085261a7179f', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f1b86456276efc6fe453b236f786ad60f51f90b0', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'a90a31db7a10fa68a6ffbfbace297f9204af661c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '551cd870041bc9d74949c55ddade45b607627b9c', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '04f900a2110709622e1417517ad8c0f56a9dd560', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'b075fc8a9b9d61053755b7d2cf6216b88eca21e6', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f4a93840d7e1a8d66fdcb67d658fc9b919145302', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '118fa5dea4d246c9c5ebfcd06f717a55ef64d39f', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '16d991ea189e31748702a55ffcf879fdacb8f6ba', class: {
+        return (h("div", { key: 'b72d752e39024d30607e7a86bc9541ea2141e40c', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'b828e61a0563401e4df70d59097a2c2435095cf8', name: this.icon }), h("slot", { key: 'bdb1b95e2889c32031d2598fe34dddeab2ef4dcd' }), this.interactiveIcon && (h("button", { key: '3e582772c08ecbb1e497394d9bfe8be178256407', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '3ae442b49b846d3fadbf7547ba4574de5a2fd6fc', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'ea88728b94745d8a72b78ffdbb09d24de10d56a5', name: this.icon }), h("slot", { key: '36bea3ad6017a06d4ed8a3592ce98f5799da7e79' }), this.interactiveIcon && (h("button", { key: '0321ec2ba1a499057022fa46f4c6d4e284d74ce4', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'dc32dda6bd49e897b4895b17069e0f031f622070', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }