@zanichelli/albe-web-components 17.0.0-RC4 → 17.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-book-card-deprecated/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 {ZBookCardDeprecated} from \".\";\nimport {BookCardDeprecatedVariant} from \"../../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCardDeprecated & {\n  theme: \"theme-default\" | \"theme-dark\" | \"theme-black-yellow\";\n} & CSSVarsArguments<\n    | \"z-book-card-ribbon-background-color\"\n    | \"z-book-card-ribbon-shadow-color\"\n    | \"z-book-card-compact-width\"\n    | \"z-book-card-compact-height\"\n  >;\nconst StoryMeta = {\n  title: \"ZBookCardDeprecated\",\n  component: \"z-book-card\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardDeprecatedVariant),\n    },\n    \"theme\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: [\"theme-default\", \"theme-dark\", \"theme-black-yellow\"],\n    },\n    \"--z-book-card-ribbon-background-color\": getColorTokenArgConfig(),\n    \"--z-book-card-ribbon-shadow-color\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"variant\": BookCardDeprecatedVariant.EXPANDED,\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\": \"\",\n    \"ribbon\": \"ADOTTATO\",\n    \"ribbonIcon\": \"\",\n    \"ribbonInteractive\": false,\n    \"borderless\": false,\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"operaTitleTag\": \"h1\",\n    \"theme\": \"theme-default\",\n    \"--z-book-card-ribbon-background-color\": \"var(--avatar-C08)\",\n    \"--z-book-card-ribbon-shadow-color\": \"var(--green950)\",\n    \"--z-book-card-compact-width\": \"262px\",\n    \"--z-book-card-compact-height\": \"600px\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const AllProps = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    ></z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedTags = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedResources = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <a\n        class=\"z-link z-link-icon\"\n        slot=\"resources\"\n        style=\"width:100%; margin-bottom: 6px;\"\n      >\n        <z-icon\n          style=\"margin-right: 8px\"\n          name=\"arrow-quad-north-east\"\n        ></z-icon>\n        Resource link mock\n      </a>\n      <z-button\n        slot=\"resources\"\n        variant=\"secondary\"\n        size=\"x-small\"\n        style=\"width:100%; margin-bottom: 16px;\"\n        >Resource CTA mock</z-button\n      >\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedHeaderCta = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedFooterCta = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <div slot=\"footer-cta\">\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Leggi il libro online\n        </z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const ExpandedVariant = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"expanded\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n      })}\n    >\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <a\n        class=\"z-link z-link-icon\"\n        slot=\"resources\"\n        style=\"width:100%; margin-bottom: 6px;\"\n      >\n        <z-icon\n          style=\"margin-right: 8px\"\n          name=\"arrow-quad-north-east\"\n        ></z-icon>\n        Resource link mock\n      </a>\n      <z-button\n        slot=\"resources\"\n        variant=\"secondary\"\n        size=\"x-small\"\n        style=\"width:100%; margin-bottom: 16px;\"\n        >Resource CTA mock</z-button\n      >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n        tabindex=\"0\"\n      ></z-icon>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SearchVariant = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"search\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <div slot=\"footer-cta\">\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Leggi il libro online\n        </z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const CompactVariant = {\n  parameters: {\n    controls: {\n      exclude: [\n        \"variant\",\n        \"ribbon\",\n        \"ribbonIcon\",\n        \"ribbonInteractive\",\n        \"--z-book-card-ribbon-background-color\",\n        \"--z-book-card-ribbon-shadow-color\",\n      ],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"compact\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      borderless=${args.borderless}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <div\n        slot=\"footer-cta\"\n        style=\"display:flex; gap:8px;\"\n      >\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Call to action\n        </z-button>\n        <z-button\n          icon=\"arrow-quad-north-east\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        ></z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-book-card-deprecated/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 {ZBookCardDeprecated} from \".\";\nimport {BookCardDeprecatedVariant} from \"../../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCardDeprecated & {\n  theme: \"theme-default\" | \"theme-dark\" | \"theme-black-yellow\";\n} & CSSVarsArguments<\n    | \"z-book-card-ribbon-background-color\"\n    | \"z-book-card-ribbon-shadow-color\"\n    | \"z-book-card-compact-width\"\n    | \"z-book-card-compact-height\"\n  >;\nconst StoryMeta = {\n  title: \"ZBookCardDeprecated\",\n  component: \"z-book-card\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardDeprecatedVariant),\n    },\n    \"theme\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: [\"theme-default\", \"theme-dark\", \"theme-black-yellow\", \"theme-red\"],\n    },\n    \"--z-book-card-ribbon-background-color\": getColorTokenArgConfig(),\n    \"--z-book-card-ribbon-shadow-color\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"variant\": BookCardDeprecatedVariant.EXPANDED,\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\": \"\",\n    \"ribbon\": \"ADOTTATO\",\n    \"ribbonIcon\": \"\",\n    \"ribbonInteractive\": false,\n    \"borderless\": false,\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"operaTitleTag\": \"h1\",\n    \"theme\": \"theme-default\",\n    \"--z-book-card-ribbon-background-color\": \"var(--avatar-C08)\",\n    \"--z-book-card-ribbon-shadow-color\": \"var(--green950)\",\n    \"--z-book-card-compact-width\": \"262px\",\n    \"--z-book-card-compact-height\": \"600px\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const AllProps = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    ></z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedTags = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedResources = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <a\n        class=\"z-link z-link-blue z-link-icon\"\n        slot=\"resources\"\n        style=\"width:100%; margin-bottom: 6px;\"\n      >\n        <z-icon\n          style=\"margin-right: 8px\"\n          name=\"arrow-quad-north-east\"\n        ></z-icon>\n        Resource link mock\n      </a>\n      <z-button\n        slot=\"resources\"\n        variant=\"secondary\"\n        size=\"x-small\"\n        style=\"width:100%; margin-bottom: 16px;\"\n        >Resource CTA mock</z-button\n      >\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedHeaderCta = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SlottedFooterCta = {\n  parameters: {\n    controls: {\n      exclude: [\"borderless\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=${args.variant}\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <div slot=\"footer-cta\">\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Leggi il libro online\n        </z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const ExpandedVariant = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"expanded\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n      })}\n    >\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <a\n        class=\"z-link z-link-blue z-link-icon\"\n        slot=\"resources\"\n        style=\"width:100%; margin-bottom: 6px;\"\n      >\n        <z-icon\n          style=\"margin-right: 8px\"\n          name=\"arrow-quad-north-east\"\n        ></z-icon>\n        Resource link mock\n      </a>\n      <z-button\n        slot=\"resources\"\n        variant=\"secondary\"\n        size=\"x-small\"\n        style=\"width:100%; margin-bottom: 16px;\"\n        >Resource CTA mock</z-button\n      >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n        tabindex=\"0\"\n      ></z-icon>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const SearchVariant = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"borderless\", \"theme\", \"--z-book-card-compact-width\", \"--z-book-card-compact-height\"],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"search\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      ribbon=${args.ribbon}\n      ribbon-icon=${args.ribbonIcon}\n      ribbon-interactive=${args.ribbonInteractive}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      style=${styleMap({\n        \"--z-book-card-ribbon-background-color\": `${args[\"--z-book-card-ribbon-background-color\"]}`,\n        \"--z-book-card-ribbon-shadow-color\": `${args[\"--z-book-card-ribbon-shadow-color\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <div slot=\"footer-cta\">\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Leggi il libro online\n        </z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n\nexport const CompactVariant = {\n  parameters: {\n    controls: {\n      exclude: [\n        \"variant\",\n        \"ribbon\",\n        \"ribbonIcon\",\n        \"ribbonInteractive\",\n        \"--z-book-card-ribbon-background-color\",\n        \"--z-book-card-ribbon-shadow-color\",\n      ],\n    },\n  },\n  render: (args) =>\n    html`<z-book-card-deprecated\n      variant=\"compact\"\n      cover=${args.cover}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      borderless=${args.borderless}\n      authors=${args.authors}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      fallback-cover=${args.fallbackCover}\n      opera-title-tag=${args.operaTitleTag}\n      class=${args.theme}\n      style=${styleMap({\n        \"--z-book-card-compact-width\": `${args[\"--z-book-card-compact-width\"]}`,\n        \"--z-book-card-compact-height\": `${args[\"--z-book-card-compact-height\"]}`,\n      })}\n    >\n      <z-icon\n        name=\"star-empty\"\n        slot=\"header-cta\"\n      ></z-icon>\n      <z-tag\n        slot=\"tags\"\n        style=\"--z-tag-bg: var(--avatar-C18)\"\n        >EDI</z-tag\n      >\n      <z-tag slot=\"tags\">VERSIONE INSEGNANTE</z-tag>\n      <div\n        slot=\"footer-cta\"\n        style=\"display:flex; gap:8px;\"\n      >\n        <z-button\n          href=\"http://dizionari.zanichelli.it\"\n          target=\"_blank\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        >\n          Call to action\n        </z-button>\n        <z-button\n          icon=\"arrow-quad-north-east\"\n          variant=\"secondary\"\n          size=\"x-small\"\n        ></z-button>\n      </div>\n    </z-book-card-deprecated>`,\n} satisfies Story;\n"]}

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

@@ -233,9 +233,9 @@
   align-items: center;
   justify-content: center;
   padding: calc(var(--space-unit) * 1) 0;
-  color: var(--color-link-primary);
+  color: var(--color-text-link-blue);
   cursor: pointer;
-  fill: var(--color-link-primary);
+  fill: var(--color-text-link-blue);
   font-size: var(--font-size-2);
   font-weight: var(--font-sb);
   gap: var(--space-unit);

package/dist/collection/components/deprecated/z-menu-deprecated/index.js

@@ -96,7 +96,7 @@ export class ZMenuDeprecated {
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: '168ae999d1b4ed3f790b24d164ea5ee574ad4667' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '16fe3c3597ee65ffe758d209db2124d9dce766ca', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '6baa93318d9edb189c31ef73515083ecddbcc4ec', class: "header" }, h("slot", { key: '7d221ecaae610ff5a6cc533c06e65c76684b3cfc', name: "header", onSlotchange: this.checkContent }))), h("div", { key: 'd706e6a9bded04273fec5fb7676042a59e9eda81', class: "items", role: "menu" }, h("slot", { key: '494d78bea12e9abf941216b8f7af70e429448ab5', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: 'b85eb4e974d6e49d326f637e96f467d867588cc4' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '36e4f36123dd6e49f334a6f5e98cce0875df158c', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: 'd8d980f037bd593ca7388946f27f08372d19f7e8', class: "header" }, h("slot", { key: '1d40e062cc0d24b5c7adcb707341d438e0089cb7', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '93cdd787bb371624be8311ca32539a576ee1fcb7', class: "items", role: "menu" }, h("slot", { key: '2d1ffad0d4c6fec04d202e371118535f5454eaef', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     static get is() { return "z-menu-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js

@@ -43,7 +43,7 @@ export class ZMenuSectionDeprecated {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '0c21e80c57e2fd5e618b84f8eb1d709616f4e5db', role: "menu", open: this.open }, h("button", { key: '580b545233b54719f41a094599ab7f1079927050', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '36dd56fc971a348b7b64e0221f7e4777e86adbd1', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'fad86e31ca84d7628c830d2528e64bf09c53d772', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '7ef9d79c46d058ce4de9d15baa2bd57e02ee9f90', class: "items" }, h("slot", { key: '1203537f2478929ee2eb53c7c08a1c2b558b2e0c', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '683c1153c92167f03d2324765485f0c42d9e088e', role: "menu", open: this.open }, h("button", { key: '774e5b28393d489684864d4e3ad3e5f2f9ad8ffe', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'f27ceb99398725734be2027e191c7bba8e3bf593', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'a5a2a175c5ec52579d184afbed86135f0c43ea8e', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'd27cf75d9481eae65039adc296246776b09fbc3a', class: "items" }, h("slot", { key: 'dbb67c5b4f7587a4f83a4ffe8a8af6d91d1180c8', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     static get is() { return "z-menu-section-deprecated"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-upload/z-dragdrop-area/index.js

@@ -1,27 +1,23 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class ZDragdropArea {
     constructor() {
         this.dragAndDropLabel = undefined;
+        this.dragging = false;
     }
-    fileDroppedHandler(files) {
-        this.fileDropped.emit(files);
-    }
-    renderOnDragOverMessage() {
-        return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("span", { class: "body-2-sb" }, this.dragAndDropLabel))));
+    onDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (e.dataTransfer.files.length) {
+            this.fileDropped.emit(e.dataTransfer.files);
+        }
     }
     render() {
-        return (h("div", { key: 'fcf1a3aa4e0a0b019f1d3f4ee5c7c353b58eb37d', tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
+        return (h(Host, { key: '5dd259e74cca7c7fa1278d9cdc11062efaaf34b2', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
-                this.dragDropContainer.classList.add("dragover");
+                this.dragging = true;
             }, onDragLeave: () => {
-                this.dragDropContainer.classList.remove("dragover");
-            }, onDrop: (e) => {
-                e.preventDefault();
-                if (e.dataTransfer.files.length) {
-                    this.dragDropContainer.classList.remove("dragover");
-                    this.fileDroppedHandler(e.dataTransfer.files);
-                }
-            } }, this.renderOnDragOverMessage(), h("slot", { key: '6fed0f0841a77882e225c16ded895758c5c95998' })));
+                this.dragging = false;
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '2c8607ad99edd4ad3a59b9b2511222b4fced829d', class: "dragover-container" }, h("z-button", { key: '8cc6efce06a0df6d5473d2a6e1920e1e38952906' }, this.dragAndDropLabel)), h("slot", { key: '969e228a60b69c7eed7f287c3a5b35b8e82bbe07' })));
     }
     static get is() { return "z-dragdrop-area"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +52,11 @@ export class ZDragdropArea {
             }
         };
     }
+    static get states() {
+        return {
+            "dragging": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "fileDropped",

package/dist/collection/components/file-upload/z-dragdrop-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,aAAa;;;;IAShB,kBAAkB,CAAC,KAAe;QACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAIO,uBAAuB;QAC7B,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CAClD,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,KAAK,EAAC,UAAU,EAChB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACnD,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACtD,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAChC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBACpD,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;YAEA,IAAI,CAAC,uBAAuB,EAAE;YAC/B,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private fileDroppedHandler(files: FileList): void {\n    this.fileDropped.emit(files);\n  }\n\n  private dragDropContainer: HTMLDivElement;\n\n  private renderOnDragOverMessage(): HTMLDivElement {\n    return (\n      <div class=\"dragover-container\">\n        <div class=\"dragover-message\">\n          <span class=\"body-2-sb\">{this.dragAndDropLabel}</span>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        ref={(val) => (this.dragDropContainer = val)}\n        class=\"dragdrop\"\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragDropContainer.classList.add(\"dragover\");\n        }}\n        onDragLeave={() => {\n          this.dragDropContainer.classList.remove(\"dragover\");\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          if (e.dataTransfer.files.length) {\n            this.dragDropContainer.classList.remove(\"dragover\");\n            this.fileDroppedHandler(e.dataTransfer.files);\n          }\n        }}\n      >\n        {this.renderOnDragOverMessage()}\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,aAAa;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YAE9B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/z-dragdrop-area/styles.css

@@ -1,39 +1,71 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > .dragdrop {
   position: relative;
   display: flex;
-  height: 228px;
+  width: 772px;
+  max-width: 100%;
+  height: 232px;
   flex-direction: column;
-  padding: calc(var(--space-unit) * 2);
-  border-color: var(--color-surface04);
+  align-items: center;
+  padding: calc(var(--space-unit) * 3);
   background-color: var(--color-surface02);
-
-  /* Native CSS properties don't support the customization of border-style.
-  Therefore, we use a trick with an SVG image inside background-image property.
-  The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap.
-  Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have. */
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e");
-  border-radius: 2px;
+  background-image: repeating-linear-gradient(
+      0deg,
+      var(--color-surface03),
+      var(--color-surface03) 12px,
+      transparent 12px,
+      transparent 20px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--color-surface03),
+      var(--color-surface03) 12px,
+      transparent 12px,
+      transparent 20px
+    ),
+    repeating-linear-gradient(
+      180deg,
+      var(--color-surface03),
+      var(--color-surface03) 12px,
+      transparent 12px,
+      transparent 20px
+    ),
+    repeating-linear-gradient(
+      270deg,
+      var(--color-surface03),
+      var(--color-surface03) 12px,
+      transparent 12px,
+      transparent 20px
+    );
+  background-position:
+    0 0,
+    0 0,
+    100% 0,
+    0 100%;
+  background-repeat: no-repeat;
+  background-size:
+    2px 100%,
+    100% 2px,
+    2px 100%,
+    100% 2px;
+  border-radius: var(--border-radius-small);
   color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 
-:host > .dragdrop:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
+:host,
+* {
+  box-sizing: border-box;
 }
 
 /* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
-:host > .dragdrop.dragover * {
+:host(.dragover) * {
   pointer-events: none;
 }
 
-:host > .dragdrop .dragover-container {
+.dragover-container {
   position: absolute;
-  z-index: 10;
+  z-index: 1;
   top: 0;
   left: 0;
   display: none;
@@ -43,13 +75,7 @@
   box-shadow: var(--shadow-focus-primary);
 }
 
-:host > .dragdrop .dragover-container .dragover-message {
-  padding: 10px 28px;
-  background-color: var(--color-link-primary);
-  color: var(--color-text-inverse);
-}
-
-:host > .dragdrop.dragover .dragover-container {
+:host(.dragover) .dragover-container {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/file-upload/z-file/index.js

@@ -32,7 +32,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b99ff5a4dd4faa2f964189e52264b8f5af79b61c' }, this.allowPopover && (h("z-popover", { key: '41b672aeaf252c2eb231371c622b3632bc8f5046', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '1c9b014b23e9e40c282e9044484a77bb966251c9', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'dd727841dc90cb19abf85156cdacb83632528e18', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'f4d54ff1d4930793da78b03098ccacfa8ca94d37', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '9a670c454baa87afc7d1c9e47a744eecaa074c68' }, this.allowPopover && (h("z-popover", { key: '8d5d38d65a09aee75d56b888b9828a3f8a9e1626', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'c24e0d8afecbe3fdfb6370c76ddc0db54f597497', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'a5c4ff0f9366bb59d581c9d48606d8989bbed678', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'eed1a949170a44f7ff618ec3e363923aea656742', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }