npm - @zanichelli/albe-web-components - Versions diffs - 16.4.0 → 17.0.0-RC1 - Mend

@zanichelli/albe-web-components 16.4.0 → 17.0.0-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (754) hide show

package/dist/esm/z-book-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-book-card.entry.js","mappings":"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","names":[],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES /\n\n:host {\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: 568px;\n}\n\n:host > article {\n display: block;\n width: 100%;\n max-width: 360px;\n box-sizing: border-box;\n border: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n display: flex;\n overflow: hidden;\n border: var(--border-size-small) solid var(--color-surface03);\n line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n width: auto;\n max-width: 100%;\n height: auto;\n max-height: 100%;\n align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n position: absolute;\n z-index: 10;\n top: calc(var(--space-unit) 2);\n left: calc(var(--space-unit) * -2);\n display: flex;\n max-width: 100%;\n height: calc(var(--space-unit) * 4);\n box-sizing: border-box;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 2);\n border: var(--border-size-medium) solid var(--color-surface01);\n background: var(--z-book-card-ribbon-background-color);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n box-shadow: var(--shadow-2);\n color: var(--color-text-inverse);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n cursor: pointer;\n}\n\n:host > article div.cover .ribbon.interactive:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host > article div.cover .ribbon span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n position: absolute;\n bottom: -12px;\n left: -2px;\n width: 0;\n height: 0;\n border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n border-left: 16px solid transparent;\n content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n margin: var(--space-unit) 0;\n border-radius: var(--border-radius);\n}\n\n:host > article .title {\n display: flex;\n height: 100%;\n align-self: center;\n color: var(--color-default-text);\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host > article .title * {\n all: unset;\n}\n\n:host > article div.subtitle {\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n:host > article div.authors {\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n line-height: 1.33;\n}\n\n:host > article div.isbn {\n overflow: hidden;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n display: flex;\n overflow: hidden;\n max-height: 32px;\n flex-flow: row wrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n --z-icon-width: 20px;\n --z-icon-height: 20px;\n\n padding: var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01-icon);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]:focus) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n/* EXPANDED STYLES /\n\n:host > article.expanded {\n width: 100%;\n min-width: 328px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: top;\n justify-content: space-between;\n margin-bottom: var(--space-unit);\n white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n:host > article.expanded div.footer {\n border-top: var(--border-size-small) solid var(--color-surface03);\n margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n display: none;\n}\n\n:host > article.expanded button.show-resources {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n\n all: unset;\n display: flex;\n width: 100%;\n flex-flow: row nowrap;\n align-content: center;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 1) 0;\n color: var(--color-link-primary);\n cursor: pointer;\n fill: var(--color-link-primary);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES /\n\n:host > article.search {\n width: 262px;\n height: 616px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n display: flex;\n height: 24px;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: center;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) * 1.5);\n white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n height: 314px;\n border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n display: block;\n height: initial;\n align-self: unset;\n font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* COMPACT STYLES /\n\n:host > article.compact {\n width: var(--z-book-card-compact-width);\n height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n width: 100%;\n height: calc(var(--z-book-card-compact-width) 1.36);\n box-sizing: border-box;\n border: none;\n background: var(--color-white);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n display: flex;\n height: 100%;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n display: flex;\n box-sizing: border-box;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 2);\n padding-top: var(--space-unit);\n margin: 0;\n}\n\n:host > article.compact div.action-container {\n padding: calc(var(--space-unit) * 2);\n padding-top: 0;\n margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n padding: 0;\n padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n padding: 0;\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n display: block;\n height: initial;\n align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host > article {\n width: 100%;\n max-width: initial;\n }\n\n :host > article .title {\n display: block;\n height: initial;\n align-self: unset;\n }\n\n / EXPANDED STYLES /\n\n :host > article.expanded {\n width: 100%;\n min-width: initial;\n max-width: initial;\n height: 360px;\n padding: 0;\n border: 0;\n }\n\n :host > article.expanded div.wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n }\n\n :host > article.expanded div.cover div.img-wrapper {\n width: 262px;\n height: 356px;\n border: 0;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-right: none;\n background: var(--color-surface01);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n }\n\n :host > article.expanded div.cover div.img-wrapper img {\n width: auto;\n border-radius: 0;\n }\n\n :host > article.expanded div.content {\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 356px;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-left: none;\n margin: 0;\n background: var(--color-surface01);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n }\n\n :host > article.expanded div.content div.top {\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n }\n\n :host > article.expanded div.content div.top div.info {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) / 2);\n }\n\n :host > article.expanded div.content div.top div.info > div.left {\n width: 100%;\n }\n\n :host > article.expanded div.content div.bottom {\n padding: calc(var(--space-unit) * 2);\n padding-bottom: 0;\n }\n}\n\n/* Desktop breakpoint /\n\n@media (min-width: 1152px) {\n :host > article {\n width: fit-content;\n max-width: initial;\n }\n}\n\n/ Wide breakpoint /\n@media (min-width: 1366px) {\n :host > article.expanded {\n width: 635px;\n }\n\n :host > article.expanded div.content {\n width: 369px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/\n @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n /\n@Component({\n tag: \"z-book-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /\n Card variant: expanded, compact, search\n /\n @Prop()\n variant: BookCardVariant;\n\n /\n Cover URL\n /\n @Prop()\n cover: string;\n\n /\n Card main title\n /\n @Prop()\n operaTitle: string;\n\n /\n [optional] Card subtitle\n /\n @Prop()\n volumeTitle?: string;\n\n /\n [optional] Authors\n /\n @Prop()\n authors?: string;\n\n /\n [optional] Main ISBN\n /\n @Prop()\n isbn?: string;\n\n /\n [optional] ISBN label\n /\n @Prop()\n isbnLabel = \"\";\n\n /\n [optional] Ribbon label - expanded and search variant only\n /\n @Prop()\n ribbon?: string;\n\n /\n [optional] Ribbon icon - expanded and search variant only\n /\n @Prop()\n ribbonIcon?: string;\n\n /\n [optional] Ribbon interactive - expanded and search variant only\n /\n @Prop()\n ribbonInteractive?: boolean;\n\n /\n [optional] Borderless card - compact variant only\n /\n @Prop()\n borderless?: boolean;\n\n /\n [optional] Fallback cover URL\n /\n @Prop()\n fallbackCover?: string;\n\n /\n [optional] [accessibility] Card title HTML tag\n /\n @Prop()\n operaTitleTag?: string;\n\n @State()\n isMobile = false;\n\n @State()\n hasResources = false;\n\n @State()\n showResources = false;\n\n /* click on interactive ribbon */\n @Event()\n ribbonClick: EventEmitter;\n\n private emitRibbonClick(): void {\n this.ribbonClick.emit();\n }\n\n private id: string;\n\n componentWillLoad(): void {\n this.id = `id-${randomId()}`;\n\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n }\n\n componentDidLoad(): void {\n this.handleResources();\n }\n\n private handleResources(): void {\n if (this.variant !== BookCardVariant.EXPANDED \|\| !this.isMobile) {\n return;\n }\n this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n }\n\n private toggleResources(): void {\n this.showResources = !this.showResources;\n }\n\n private renderCard(): HTMLDivElement {\n switch (this.variant) {\n case BookCardVariant.EXPANDED:\n return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n case BookCardVariant.COMPACT:\n return this.renderCompactCard();\n case BookCardVariant.SEARCH:\n return this.renderSearchCard();\n }\n }\n\n private renderExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n <div class=\"top\">\n <div class=\"info\">\n <div class=\"left\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n </div>\n {this.renderTagsSlot()}\n </div>\n <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n </div>\n </div>\n );\n }\n\n private renderMobileExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.hasResources && (\n <div\n class={{\n footer: true,\n open: this.showResources,\n close: !this.showResources,\n }}\n >\n {!this.showResources && this.renderShowResources()}\n {this.renderResourcesSlot()}\n {this.showResources && this.renderShowResources()}\n </div>\n )}\n </div>\n );\n }\n\n private renderSearchCard(): HTMLDivElement {\n return (\n <div class=\"wrapper-container\">\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCompactCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n <div class=\"img-wrapper\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n </div>\n </div>\n );\n }\n\n private renderRibbon(): HTMLElement {\n const content = [\n this.ribbonIcon && (\n <z-icon\n name={this.ribbonIcon}\n width={16}\n height={16}\n fill={\"color-inverse-icon\"}\n />\n ),\n <span>{this.ribbon}</span>,\n ];\n\n return this.ribbonInteractive ? (\n <button\n class=\"ribbon interactive\"\n onClick={() => this.emitRibbonClick()}\n >\n {content}\n </button>\n ) : (\n <div class=\"ribbon\">{content}</div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleTag\n ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"title\"\n innerHTML={title}\n />\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n return this.authors ? (\n <div\n class=\"authors\"\n aria-description=\"Autori\"\n >\n {this.authors}\n </div>\n ) : null;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n return this.isbn ? (\n <div class=\"isbn\">\n <span\n class=\"code\"\n aria-description={`ISBN ${this.isbnLabel}`}\n >\n {this.isbn}\n </span>\n {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n </div>\n ) : null;\n }\n\n private renderShowResources(): HTMLButtonElement {\n return (\n <button\n class=\"show-resources\"\n aria-label={`Risorse del libro ${this.operaTitle}`}\n aria-expanded={this.showResources.toString()}\n aria-controls={`resources-${this.id}`}\n onClick={() => this.toggleResources()}\n >\n {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n </button>\n );\n }\n\n private renderTagsSlot(): HTMLDivElement {\n return (\n <div class=\"tags\">\n <slot name=\"tags\" />\n </div>\n );\n }\n\n private renderHeaderCtaSlot(): HTMLSlotElement {\n return <slot name=\"header-cta\" />;\n }\n\n private renderResourcesSlot(): HTMLDivElement {\n return (\n <div\n id={`resources-${this.id}`}\n class=\"resources\"\n >\n <slot\n name=\"resources\"\n onSlotchange={() => this.handleResources()}\n />\n </div>\n );\n }\n\n private renderFooterCtaSlot(): HTMLDivElement {\n return (\n <div class=\"action-container\">\n <slot name=\"footer-cta\" />\n </div>\n );\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n borderless: !!this.borderless,\n }}\n >\n {this.renderCard()}\n </article>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-book-card.entry.js","mappings":"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","names":["stylesCss"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n display: block;\n max-width: fit-content;\n}\n\n:host > article {\n background-color: var(--color-surface01);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host > article.landscape {\n width: 635px;\n min-height: 332px;\n max-height: 428px;\n box-sizing: border-box;\n border: solid var(--border-size-medium) var(--color-surface03);\n border-radius: var(--border-radius);\n\n .main-content {\n display: flex;\n height: 296px;\n padding: calc(var(--space-unit) 2);\n gap: calc(var(--space-unit) * 2);\n\n .cover {\n display: flex;\n overflow: hidden;\n width: 221px;\n border-radius: var(--border-radius);\n\n img {\n max-width: 100%;\n max-height: 100%;\n align-self: end;\n }\n }\n\n .card-info {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: calc(var(--space-unit) * 2);\n\n .book-data {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n\n .authors-title-cta-section {\n display: flex;\n gap: calc(var(--space-unit) * 2);\n\n .authors-title {\n flex: 1;\n\n .authors {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n margin-bottom: calc(var(--space-unit) / 2);\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n }\n\n .opera-title {\n display: -webkit-box;\n overflow: hidden;\n height: 54px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n text-overflow: ellipsis;\n\n * {\n all: unset;\n }\n }\n }\n }\n\n .isbn-tags-link-section {\n .isbn-tags-section {\n margin-bottom: var(--space-unit);\n\n .volume-title {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n }\n\n .isbn {\n display: -webkit-box;\n overflow: hidden;\n height: 20px;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n text-overflow: ellipsis;\n }\n\n .tags {\n display: flex;\n overflow: hidden;\n height: 22px;\n flex-flow: wrap;\n padding: calc(var(--space-unit) / 2) 0;\n gap: var(--space-unit);\n\n z-tag.active {\n --z-tag-bg: var(--color-primary03);\n --z-tag-text-color: var(--color-default-text);\n }\n\n z-tag.disabled {\n --z-tag-bg: var(--color-surface03);\n --z-tag-text-color: var(--color-default-text);\n }\n\n z-tag.interactive {\n cursor: pointer;\n }\n\n z-tag:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n }\n }\n }\n\n .link-section {\n display: flex;\n height: 24px;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-unit);\n\n .adoption-tag {\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n background-color: var(--green100);\n border-radius: 100px;\n text-transform: uppercase;\n }\n }\n }\n }\n\n .ebook-container {\n height: 76px;\n\n .ebook {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-unit);\n background-color: var(--color-primary02);\n border-radius: var(--border-radius);\n gap: var(--space-unit);\n\n .app-name {\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) / 2) 0;\n font-family: var(--font-family-serif);\n gap: calc(var(--space-unit) / 2);\n\n .laz {\n color: var(--red500);\n }\n }\n }\n }\n }\n }\n\n ::slotted([slot=\"apps\"]) {\n border-top: solid var(--border-size-small) var(--color-surface03);\n }\n }\n}\n\n/* Desktop breakpoint /\n\n/\n@media (min-width: 1152px) {\n} /\n\n/ Wide breakpoint /\n\n/ @media (min-width: 1366px) {\n} /\n","button.z-link {\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n display: inline-flex;\n color: var(--color-link-primary);\n cursor: pointer;\n fill: var(--color-link-primary);\n font-family: var(--font-family-sans);\n line-height: inherit;\n text-decoration: none;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus {\n color: var(--color-hover-link);\n fill: var(--color-hover-link);\n}\n\na.z-link:focus,\nbutton.z-link:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active {\n color: var(--color-pressed-link);\n fill: var(--color-pressed-link);\n}\n\na.z-link:visited,\nbutton.z-link:visited {\n color: var(--color-visited-link);\n fill: var(--color-visited-link);\n}\n\na.z-link.z-link-active,\nbutton.z-link.z-link-active {\n color: var(--color-active-link);\n fill: var(--color-active-link);\n}\n\na.z-link.z-link-active.z-link-inverse,\nbutton.z-link.z-link-active.z-link-inverse {\n color: var(--color-inverse-active-link);\n fill: var(--color-inverse-active-link);\n}\n\na.z-link.z-link-active.z-link-black,\nbutton.z-link.z-link-active.z-link-black {\n color: var(--color-black);\n fill: var(--color-black);\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n box-shadow: none;\n color: var(--color-disabled03);\n cursor: default;\n fill: var(--color-disabled03);\n outline: none;\n pointer-events: none;\n text-decoration: none;\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n text-decoration: underline;\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse {\n color: var(--color-inverse-link);\n fill: var(--color-inverse-link);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n color: var(--color-inverse-hover-link);\n fill: var(--color-inverse-hover-link);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus,\nbutton.z-link.z-link-inverse:focus {\n color: var(--color-inverse-pressed-link);\n fill: var(--color-inverse-pressed-link);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n color: var(--color-inverse-visited-link);\n fill: var(--color-inverse-visited-link);\n}\n\na.z-link.z-link-black,\nbutton.z-link.z-link-black {\n color: var(--gray800);\n fill: var(--gray800);\n}\n\na.z-link.z-link-black:hover:visited,\nbutton.z-link.z-link-black:hover:visited {\n color: var(--gray800);\n fill: var(--gray800);\n}\n\na.z-link.z-link-black:hover,\nbutton.z-link.z-link-black:hover,\na.z-link.z-link-black.z-link-active:focus,\nbutton.z-link.z-link-black.z-link-active:focus {\n color: var(--color-black);\n fill: var(--color-black);\n}\n\na.z-link.z-link-black:active,\nbutton.z-link.z-link-black:active,\na.z-link.z-link-black.z-link-active:active,\nbutton.z-link.z-link-black.z-link-active:active {\n color: var(--gray700);\n fill: var(--gray700);\n}\n\na.z-link.z-link-black.z-link-disabled.z-link-active,\nbutton.z-link.z-link-black.z-link-disabled.z-link-active {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\na.z-link.z-link-white,\nbutton.z-link.z-link-white {\n color: var(--color-white);\n fill: var(--color-white);\n}\n\na.z-link.z-link-white.z-link-disabled,\nbutton.z-link.z-link-white.z-link-disabled {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n --z-icon-width: 1.125em;\n --z-icon-height: 1.125em;\n\n align-items: center;\n column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n font-weight: var(--font-sb);\n}\n",":root {\n / font-family /\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n / font-weight /\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n / font-size type scale /\n --font-size-1: 0.75rem; / 12px /\n --font-size-2: 0.875rem; / 14px /\n --font-size-3: 1rem; / assuming 16px /\n --font-size-4: 1.125rem; / 18px /\n --font-size-5: 1.25rem; / 20px /\n --font-size-6: 1.5rem; / 24px /\n --font-size-7: 1.75rem; / 28px /\n --font-size-8: 2rem; / 32px /\n --font-size-9: 2.25rem; / 36px /\n --font-size-10: 2.625rem; / 42px /\n --font-size-11: 3rem; / 48px /\n --font-size-12: 3.375rem; / 54px /\n --font-size-13: 3.75rem; / 60px /\n --font-size-14: 4.25rem; / 68px /\n --font-size-15: 4.75rem; / 76px /\n --font-size-16: 5.25rem; / 84px /\n --font-size-17: 5.75rem; / 92px /\n\n / cssprops to use with `font` shorthand property /\n --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/ Typography classes /\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/ section title /\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/ heading-1/2 for desktop and wide viewports /\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/ viewport classes /\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n}\n\n/ font-weight variants /\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h} from \"@stencil/core\";\nimport {BookCardTag, BookCardTagEvent, BookCardTagStatus, BookCardVariant, ControlSize} from \"../../../beans\";\n\n/\n @slot cta - to the right of authors and title (e.g. bookmark icon)\n * @slot apps - list of card-related apps\n /\n@Component({\n tag: \"z-book-card\",\n styleUrls: [\"styles.css\", \"../../css-components/z-link/styles.css\", \"../../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /* Card variant: landscape, portrait /\n @Prop()\n variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n /* Cover URL /\n @Prop()\n cover: string;\n\n /* [optional] Authors /\n @Prop()\n authors?: string;\n\n /* [optional] Opera title /\n @Prop()\n operaTitle?: string;\n\n /* [optional] Volume title /\n @Prop()\n volumeTitle?: string;\n\n /* [optional] Main ISBN /\n @Prop()\n isbn?: string;\n\n /* [optional] ISBN label /\n @Prop()\n isbnLabel = \"\";\n\n /* [optional] EDI tag /\n @Prop()\n edi?: BookCardTag \| string;\n\n /* [optional] Annotated tag /\n @Prop()\n annotated?: BookCardTag \| string;\n\n /* [optional] Teacher version tag /\n @Prop()\n teacherVersion?: BookCardTag \| string;\n\n /* [optional] Show adoption badge /\n @Prop()\n adoption?: boolean = false;\n\n /* [optional] Show catalog link to correspondent resource /\n @Prop()\n catalogUrl?: string;\n\n /* [optional] Show link to the ebook resource /\n @Prop()\n ebookUrl?: string;\n\n /* [optional] Fallback cover URL /\n @Prop()\n fallbackCover?: string;\n\n /* [optional] Set a specific h level as html tag for opera title /\n @Prop()\n operaTitleHtmlTag?: string;\n\n @State()\n ediTag;\n\n @State()\n annotatedTag;\n\n @State()\n teacherVersionTag;\n\n /* click on tag /\n @Event()\n tagClick: EventEmitter;\n\n /* click on catalog link /\n @Event()\n catalogClick: EventEmitter;\n\n /* click on ebook link /\n @Event()\n ebookClick: EventEmitter;\n\n /* click on immersive reader */\n @Event()\n immersiveReaderClick: EventEmitter;\n\n @Watch(\"edi\")\n watchEdi(): void {\n this.ediTag = typeof this.edi === \"string\" ? JSON.parse(this.edi) : this.edi;\n }\n\n @Watch(\"annotated\")\n watchAnnotated(): void {\n this.annotatedTag = typeof this.annotated === \"string\" ? JSON.parse(this.annotated) : this.annotated;\n }\n\n @Watch(\"teacherVersion\")\n watchTeacherVersion(): void {\n this.teacherVersionTag =\n typeof this.teacherVersion === \"string\" ? JSON.parse(this.teacherVersion) : this.teacherVersion;\n }\n\n componentWillLoad(): void {\n this.watchEdi();\n this.watchAnnotated();\n this.watchTeacherVersion();\n }\n\n private emitTagClick(e: BookCardTagEvent): void {\n this.tagClick.emit(e);\n }\n\n private emitCatalogClick(): void {\n this.catalogClick.emit();\n }\n\n private emitEbookClick(): void {\n this.ebookClick.emit();\n }\n\n private emitImmersiveReaderClick(): void {\n this.immersiveReaderClick.emit();\n }\n\n private renderCard(): HTMLDivElement {\n switch (this.variant) {\n case BookCardVariant.LANDSCAPE:\n return this.renderLandscape();\n case BookCardVariant.PORTRAIT:\n return this.renderPortrait();\n }\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleHtmlTag\n ? `<${this.operaTitleHtmlTag}>${this.operaTitle}</${this.operaTitleHtmlTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"opera-title body-2-sb\"\n innerHTML={title}\n />\n );\n }\n\n private renderIsbnLabel(): HTMLDivElement \| null {\n return this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null;\n }\n\n private renderTag(label: string, tag: BookCardTag, id: string): HTMLDivElement {\n return (\n <z-tag\n class={{[tag.status]: true, interactive: tag.interactive}}\n role={tag.interactive ? \"button\" : undefined}\n tabIndex={tag.interactive ? 0 : undefined}\n onClick={() =>\n tag.interactive &&\n this.emitTagClick({\n tag: id,\n state: tag.status,\n })\n }\n >\n {label}\n </z-tag>\n );\n }\n\n private renderTags(): HTMLDivElement[] \| null {\n const tags = [];\n\n if (this.edi && Object.values(BookCardTagStatus).includes(this.ediTag.status)) {\n tags.push(this.renderTag(\"edi\", this.ediTag, \"edi\"));\n }\n\n if (this.annotated && Object.values(BookCardTagStatus).includes(this.annotatedTag.status)) {\n tags.push(this.renderTag(\"annotata\", this.annotatedTag, \"annotated\"));\n }\n\n if (this.teacherVersion && Object.values(BookCardTagStatus).includes(this.teacherVersionTag.status)) {\n tags.push(this.renderTag(\"versione insegnante\", this.teacherVersionTag, \"teacherVersion\"));\n }\n\n if (tags.length > 0) {\n return tags;\n }\n\n return null;\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n <img\n src={this.cover}\n onError={() => {\n if (this.fallbackCover) {\n this.cover = this.fallbackCover;\n }\n }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n\n private renderLaZEbookLogo(): SVGElement {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <g clip-path=\"url(#clip0_11996_224)\">\n <path\n d=\"M14.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\"\n fill=\"#E2011A\"\n />\n <path\n d=\"M15.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\"\n fill=\"white\"\n />\n <path\n d=\"M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z\"\n fill=\"black\"\n />\n <path\n d=\"M8.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\"\n fill=\"black\"\n />\n <path\n d=\"M4.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\"\n fill=\"black\"\n />\n <path\n d=\"M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z\"\n fill=\"white\"\n />\n <path\n d=\"M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z\"\n fill=\"white\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_11996_224\">\n <rect\n width=\"19.326\"\n height=\"19.326\"\n fill=\"white\"\n transform=\"translate(0.169922 0.469604)\"\n />\n </clipPath>\n </defs>\n </svg>\n );\n }\n\n private renderLandscape(): HTMLDivElement {\n return (\n <Fragment>\n <div class=\"main-content\">\n {this.renderCover()}\n <div class=\"card-info\">\n <div class=\"book-data\">\n <div class=\"authors-title-cta-section\">\n <div class=\"authors-title\">\n <div\n class=\"authors body-4\"\n aria-description=\"autori\"\n >\n {this.authors}\n </div>\n {this.renderOperaTitle()}\n </div>\n <slot name=\"cta\"></slot>\n </div>\n <div class=\"isbn-tags-link-section\">\n <div class=\"isbn-tags-section\">\n <div class=\"volume-title body-4\">{this.volumeTitle}</div>\n <div\n class=\"isbn body-4-sb\"\n aria-description={`isbn ${this.isbnLabel}`}\n >\n {this.isbn} {this.renderIsbnLabel()}\n </div>\n <div class=\"tags\">{this.renderTags()}</div>\n </div>\n <div class=\"link-section\">\n <div class=\"catalog-link\">\n {this.catalogUrl && (\n <a\n href={this.catalogUrl}\n class=\"z-link z-link-icon body-4-sb immersive-reader\"\n onClick={() => this.emitCatalogClick()}\n >\n Scheda catalogo\n <z-icon\n name=\"arrow-quad-north-east\"\n height={16}\n width={16}\n fill=\"color-primary01-icon\"\n ></z-icon>\n </a>\n )}\n </div>\n {this.adoption && <div class=\"adoption-tag body-5-sb\">adottato</div>}\n </div>\n </div>\n </div>\n <div class=\"ebook-container\">\n <slot name=\"ebook\">\n {this.ebookUrl && (\n <div class=\"ebook\">\n <div>\n <div class=\"app-name\">\n {this.renderLaZEbookLogo()}\n <div class=\"body-4-sb\">\n <span class=\"laz\">laZ</span> Ebook\n </div>\n </div>\n <div class=\"body-5\">\n Anche nella versione libro liquido con{\" \"}\n <span\n class=\"body-5-sb immersive-reader\"\n onClick={() => this.emitImmersiveReaderClick()}\n >\n strumento di lettura immersiva\n </span>\n </div>\n </div>\n <z-button\n size={ControlSize.X_SMALL}\n href={this.ebookUrl}\n onClick={() => this.emitEbookClick()}\n role=\"link\"\n aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n >\n leggi ebook\n </z-button>\n </div>\n )}\n </slot>\n </div>\n </div>\n </div>\n <slot name=\"apps\"></slot>\n </Fragment>\n );\n }\n\n private renderPortrait(): HTMLDivElement {\n return <div class=\"wrapper\"></div>;\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n }}\n >\n {this.renderCard()}\n </article>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-breadcrumb.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { U as BreadcrumbPathStyle, V as BreadcrumbHomepageVariant, p as Device, g as KeyboardCode, P as PopoverPosition, i as ListSize } from './index-a63060e9.js';
-import { g as getDevice, d as handleKeyboardSubmit } from './utils-305762b5.js';
+import { U as BreadcrumbPathStyle, V as BreadcrumbHomepageVariant, p as Device, g as KeyboardCode, P as PopoverPosition, i as ListSize } from './index-ee40e66b.js';
+import { g as getDevice, d as handleKeyboardSubmit } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-link-primary);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-link-primary)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";
@@ -200,10 +200,10 @@ const ZBreadcrumb = class {
         ];
     }
     render() {
-        return (h(Host, { key: 'ec59a3c1afe2d946df4b5ef8dae569b40e20e083', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '9b1668c981c22cd2d52f31f58e2ac38a18f574fb', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '5bcdf767ac76b00a9b648c2690d6928e34574606', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ac8a7f77b6ee9c8ec07cf4eba8a0d144d7bf22b7', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'fedac8ea463ba9b20784d20cf50f9f8526055d3b' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '0161de4f9fc2cf496bacaafde6b2097bc928dcb2' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-button-sort.entry.js CHANGED Viewed

@@ -42,7 +42,7 @@ const ZButtonSort = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '0cb1fb4cd3661deb66e79e85bcc87657691af1a9', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '24c3b8e7b8c6acc83f55cbf7bc0233382a3a2738', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'a9ae20d5e3926dc6b6cd3d54757a9c829c15c823', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'd3d3aa5e07074dfd72da40f8059f70e25d1a1f58', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'e0003ebe4688bf0af648aa9b7eb01c446460f069', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '5254d0f81ee547b9841651f4c983ceaa00f6639b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '2bfcf3a440f1c4b17fdf4bad0a38c9951a7f9ec8', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '917e5afee07a7b0cd751e476f9dd4b56f2335cd9', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '3ce3cf927f7cbd40508cea8070501f6149067219', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '9c680f7e4381ebb2a6215d30a3e503aaf93365a8', name: "caret-up-down", width: 16, height: 16 })));
     }
 };
 ZButtonSort.style = ZButtonSortStyle0;

package/dist/esm/z-card.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { C as CardVariant } from './index-a63060e9.js';
+import { C as CardVariant } from './index-ee40e66b.js';
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 const ZCardStyle0 = stylesCss;

package/dist/esm/z-carousel.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { Q as CarouselArrowsPosition, R as CarouselProgressMode, B as ButtonVariant } from './index-a63060e9.js';
+import { Q as CarouselArrowsPosition, R as CarouselProgressMode, B as ButtonVariant } from './index-ee40e66b.js';
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
 const ZCarouselStyle0 = stylesCss;

package/dist/esm/z-chip.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
-import { w as ZChipType } from './index-a63060e9.js';
+import { w as ZChipType } from './index-ee40e66b.js';
 const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-text);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-default-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
 const ZChipStyle0 = stylesCss;
@@ -15,11 +15,11 @@ const ZChip = class {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'fe1e1ba8b794a0e67a04236808573c3ae9bcc4ce', class: {
+        return (h("div", { key: '738fe48ba8f925ee215855d4ae94cfc59f990bb5', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'a1ee44f219dd0b451851aadd081d29d8a03fbeaf', name: this.icon }), h("slot", { key: '126b3211e329d893d6b5b3f567cc20630dd02534' }), this.interactiveIcon && (h("button", { key: '059813ec42ff86dff2ce9fb96650ad35b38e5622', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '3fb748bef5acea52a4d4cd565b1da11ae777e784', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '67ca424408feb5accaf09528d3a18521cde87cf3', name: this.icon }), h("slot", { key: 'b31dddad6f32292a47b16654de3a79fca9beb7b9' }), this.interactiveIcon && (h("button", { key: '59870c7e12179d653c05815da7dec06fb45809d1', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '104c10e9601e973b6d91984b4b34311a8c679c01', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/z-combobox.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
-import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-a63060e9.js';
-import { r as randomId, d as handleKeyboardSubmit } from './utils-305762b5.js';
+import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-ee40e66b.js';
+import { r as randomId, d as handleKeyboardSubmit } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
 const stylesCss = ":host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-default-text)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search>div>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
@@ -258,7 +258,7 @@ const ZCombobox = class {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '303335d1978e653877985ff2435f836bca278400', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '7c86e932e576074306566fbdb4946fc5cc6a5015', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-cover-hero.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { J as CoverHeroVariant, M as CoverHeroContentPosition } from './index-a63060e9.js';
+import { J as CoverHeroVariant, M as CoverHeroContentPosition } from './index-ee40e66b.js';
 const stylesCss = ":host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot=\"cover\"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container{height:100%}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant=\"overlay\"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .content-container{position:absolute;inset:0}:host([variant=\"overlay\"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-default-text)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
 const ZCoverHeroStyle0 = stylesCss;
@@ -29,9 +29,9 @@ const ZCoverHero = class {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '1a87367d3abb5790f0ea6cacf7d3e75eacbff59d' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'b0851f69b3ca2ef898886381f01b547b59a7f76b' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'b84e940db5381001045b9ebe7dfec5069ab27694', class: "main-container" }, h("div", { key: 'f46b165bd73a5eca477cd43164999ad5517b821c', class: "cover-container" }, h("slot", { key: 'cf61e486fd79bbbf38aa788f33dbd857dba86109', name: "cover" })), h("slot", { key: 'd0a748e763dde074c1c25c9aacf84d7357c17f14', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '9045149da53fd0efb3c0e3f67a3ba15f7d9ee5a4', class: "main-container" }, h("div", { key: '76ecd3d33c52a01c5e4287487691617ffe5384bf', class: "cover-container" }, h("slot", { key: 'a779df5cdc886d42bf6ba7844b28ba950d31db4e', name: "cover" })), h("slot", { key: 'eb64e17b43080632764f0fb29d16cd0fb9295f7f', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/esm/z-date-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
-import { c as commonjsGlobal, f as flatpickr, i as it, s as setAriaOptions, a as setFlatpickrPosition, v as validateDate } from './utils-5e595d4f.js';
-import { y as ZDatePickerMode, F as ZDatePickerPosition, I as InputType } from './index-a63060e9.js';
+import { c as commonjsGlobal, f as flatpickr, i as it, s as setAriaOptions, a as setFlatpickrPosition, v as validateDate } from './utils-a31c16d9.js';
+import { y as ZDatePickerMode, F as ZDatePickerPosition, I as InputType } from './index-ee40e66b.js';
 var monthSelect = {exports: {}};
@@ -461,7 +461,7 @@ const ZDatePicker = class {
             } })));
     }
     render() {
-        return (h("div", { key: 'e36383db1da5908e5c61fcc543ff6006a0b5d27a', class: {
+        return (h("div", { key: '5a5982459b75bea224c88517b3e54e987cc899ca', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,

package/dist/esm/z-dragdrop-area_2.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
-import { g as KeyboardCode } from './index-a63060e9.js';
+import { g as KeyboardCode } from './index-ee40e66b.js';
 import { B as Breakpoints } from './breakpoints-d148bfde.js';
 const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;padding:calc(var(--space-unit) * 2);border-color:var(--color-surface04);background-color:var(--color-surface02);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;color:var(--color-default-text)}:host>.dragdrop:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);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{display:flex;align-items:center;justify-content:center}";
@@ -18,7 +18,7 @@ const ZDragdropArea = class {
         return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("span", { class: "body-2-sb" }, this.dragAndDropLabel))));
     }
     render() {
-        return (h("div", { key: '1b7b83c36eaed52bc0a7c1bd935aeb457199bd68', tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
+        return (h("div", { key: 'f03237175af7dd7898f56cd22af5594d8c429b7c', tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
                 e.preventDefault();
                 this.dragDropContainer.classList.add("dragover");
             }, onDragLeave: () => {
@@ -29,7 +29,7 @@ const ZDragdropArea = class {
                     this.dragDropContainer.classList.remove("dragover");
                     this.fileDroppedHandler(e.dataTransfer.files);
                 }
-            } }, this.renderOnDragOverMessage(), h("slot", { key: '45848602ab9f4c3318f506386d174cf8ec2fc84b' })));
+            } }, this.renderOnDragOverMessage(), h("slot", { key: 'a8fe4b44fde1d59fb0bf2ef9b1b2b999ca2b820c' })));
     }
 };
 ZDragdropArea.style = ZDragdropAreaStyle0;
@@ -1002,16 +1002,16 @@ const ZModal = class {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '503ac50f3dc7be8877138ac79cf6ced2e980d5ba', class: {
+        return (h("dialog", { key: '5da8e4ff1e24a5d3bfcf378e84e19da201548f14', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '465d23e5c49aa84569d9da23f8147ea4623c2ebe', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '1784e267b3a7e5a702751e5463325be79e940692', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '3fc4ed74ba4a9d12603721ab6ae30f0ae2cc4873', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '03a4a96b10ddbd58a1c2232ce951910fff75d9a9' }, this.modaltitle && h("h1", { key: 'cd3477f565c3f9ff1da20ec2d3984275156fc429', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '28aa28df2002147057dce0bb1ea62541cfcc4d2b', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '02d3b8ac1fa32e84ff837f6937065c81ec03f047', class: {
+            }, id: this.modalid }, h("header", { key: 'ba6a5d60a414cc4e111b98ba6a2ba096a7f487cd', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '9d83bc27bcfe735a7197186c8149aeb2b88ed597' }, this.modaltitle && h("h1", { key: 'e0d611a56a72c619a455e093c6f57b6c713a4926', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'a159731352318c11438abd354cab47006a22dadb', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '51c575ae0212082390d9174a1ba5e8d95e9ac488', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '01f16e6a6c9b1caa16271ddd28a01ac0c3ae5e5f', name: "modalContent" }))), h("div", { key: '7cb7575c0f661982ed7853ca3df904331fea6c57', class: {
+            }, id: "modal-content" }, h("slot", { key: 'fb98d41d0f6fb924d10fcf3171e203afb21a3e17', name: "modalContent" }))), h("div", { key: '02e8e0dfca14ad69a7d27fbe546f64620918c907', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/esm/z-file-upload.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { v as ZFileUploadType, p as Device, D as DividerSize } from './index-a63060e9.js';
-import { g as getDevice } from './utils-305762b5.js';
+import { v as ZFileUploadType, p as Device, D as DividerSize } from './index-ee40e66b.js';
+import { g as getDevice } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
 const stylesCss = ":host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type=\"dragdrop\"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type=\"dragdrop\"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}";
@@ -200,7 +200,7 @@ const ZFileUpload = class {
         }))))));
     }
     render() {
-        return (h(Host, { key: '7520b5da6e58534cb4c732d0745424b9b6de6991' }, h("div", { key: 'fbdd488d4cfe2cc3a01f0d2e4abfea6df3b6c8c8', class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '26e02bd9c532f2c4b38ab94854875d8b8aba9058', modalid: `file-upload-${this.type}-error-modal`, tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+        return (h(Host, { key: 'c099b84c3e81f4381f87fa6d2f7085b616ba933b' }, h("div", { key: '56eef095273ccb4724539e007c2fce9a0f0dd160', class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: 'e5f9e076f5369b0dcff3aaaa6b5706d5209eefc1', modalid: `file-upload-${this.type}-error-modal`, tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/z-file.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { w as ZChipType, P as PopoverPosition } from './index-a63060e9.js';
+import { w as ZChipType, P as PopoverPosition } from './index-ee40e66b.js';
 import { B as Breakpoints } from './breakpoints-d148bfde.js';
 const stylesCss = ".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";
@@ -38,7 +38,7 @@ const ZFile = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: '0d6f3522b4d6be820d8b96a3cd96fc4abb38d41c' }, this.allowPopover && (h("z-popover", { key: 'da950fcf5b1be6fc291895aeb0e2223275cab8fa', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '54363fac4eb3b6a723c7841bb29415b0bd763e9a', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '2842d206ffa531c93838e885ba545176554dd7e3', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'e6d0322525bf9ae3d2d09d4110a5414c25ab211b', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '58141a38cf9d43571dde4197bb54e247a3925968' }, this.allowPopover && (h("z-popover", { key: '58982b31d11c6d72df3259246c3947e7b6aeb65f', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '300fd63d8d20f290772a60ac35a700743f1df4e0', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'cd9a2b638b278c57799afb5048e45d18e3976ed6', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'bd97f91a19c5c309bebeb5c0ebbc52a06dd53f41', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/z-ghost-loading.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZGhostLoading = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: '1b6194b00f5be2533e18e4c6a914f4e51bf7e7bd' });
+        return h(Host, { key: '0c578b603092b1e9418e49549da02bdb307bd8ee' });
     }
 };
 ZGhostLoading.style = ZGhostLoadingStyle0;

package/dist/esm/z-info-box.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const ZInfoBox = class {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '4e08c5c0d3c070db1944b3ab5745d192fd4e8013', id: this.boxid }, h("slot", { key: 'f94d50c3fd311445d4abb7e3f12c387c3be4724d', name: "content" }), this.isclosable && (h("z-icon", { key: '165b638f14604a45a798210ea2de1c9f59bb3612', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '4d08d8aaaf8a140bfcf64259275d6aa33f6ab633', id: this.boxid }, h("slot", { key: '543a5a5a49ac3cb952627b2efe27ba3f18a394cb', name: "content" }), this.isclosable && (h("z-icon", { key: '79265e7a1a97a5d398e225db66a5bb28b0ee8edd', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
 };
 ZInfoBox.style = ZInfoBoxStyle0;

package/dist/esm/z-info-reveal.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { H as InfoRevealPosition, e as ControlSize } from './index-a63060e9.js';
+import { H as InfoRevealPosition, e as ControlSize } from './index-ee40e66b.js';
 const stylesCss = ":host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size=\"big\"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size=\"small\"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size=\"x-small\"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size=\"small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size=\"x-small\"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"top_right\"]) .z-info-reveal-panel{top:0}:host([position=\"bottom_left\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{bottom:0}:host([position=\"top_right\"]) .z-info-reveal-panel,:host([position=\"bottom_right\"]) .z-info-reveal-panel{right:0}:host([position=\"top_left\"]) .z-info-reveal-panel,:host([position=\"bottom_left\"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}";
 const ZInfoRevealStyle0 = stylesCss;
@@ -46,7 +46,7 @@ const ZInfoReveal = class {
         }
     }
     render() {
-        return (h(Host, { key: '0cd6457cdde5047f859f7e11feee92fb9dd0eb31', open: this.open }, h("button", { key: '63fd527be4c6d7de36aa8546dc47874ad571de01', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '0297eed1694a18d08b9290568a503afb441127ea', name: this.icon }), this.label && h("span", { key: '0fa5ff78efe186486b6991fec0edbcd560a2f302', class: "z-info-reveal-label" }, this.label)), h("div", { key: '6d1125e73e361aee556994e3e311196dfa288dee', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'fe7b4a62cb6306418f935254139cfc4b0048a821' }), h("button", { key: '789d137466ede751579c4c64eddd04269eda3c12', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '267e312def7799ab52a9fac1923d33538c8e9218', name: "multiply" })))));
+        return (h(Host, { key: 'bcb05d866c119c9f686911ebfd5d6b30fc1072d4', open: this.open }, h("button", { key: '503e35952223d6daa164bba815f94fb33880c310', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '1debca6ca34d6b9aede20b049b770a0d051f6e71', name: this.icon }), this.label && h("span", { key: '5a6ea3fa133179716e87af19b3e734a24dda8989', class: "z-info-reveal-label" }, this.label)), h("div", { key: '0ddfd54fe95e877d15cf88b525ef6f80bf042ce2', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '309ce5208cf50f612b2b267e572d7461e65dffbe' }), h("button", { key: 'fbbfaffbe9b050db008338b8369d3b945fc887b3', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'b704c1f4df7271d8bb293517701953a00d1f8b5e', name: "multiply" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-logo.entry.js CHANGED Viewed

@@ -21,7 +21,7 @@ const ZLogo = class {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: 'b7aef0e1a12aefa4609fc698ac287245d93144f0', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '983b67652dbce086db80dd62d2eff3cb7e8c5cc3', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
 };
 ZLogo.style = ZLogoStyle0;

package/dist/esm/z-menu-deprecated.entry.js CHANGED Viewed

@@ -97,7 +97,7 @@ const ZMenuDeprecated = class {
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: '3db9cc8073a46a7160e9cdd10ca8e56017fa17e3' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '1ba60c68bbb101a557bab3609640b6f0729b0791', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '08a6e9093b5f38d61ad5dc7c52749df71de26218', class: "header" }, h("slot", { key: '3c0cc8a49f9d83ca592f144d2e63e3bbb82f44a8', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '2f8d351c4fd22ff30d6f6d1899e5c3f5875b2cc5', class: "items", role: "menu" }, h("slot", { key: '4f411874aea00060bc7a1333bfed808c92d96bdd', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: '5184325a76d1b8de3aa1a9d5b1b6f390345f9a57' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: 'ba98a3dd24a7dd06c6a4cf517afaff98a9fd3f04', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '80c04af37987395ed3dcd0dda843b16731836b4d', class: "header" }, h("slot", { key: '1e77c59ff6382111a599bec3ce4c8a4a176b914c', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '6b9a68b12183b713b7b25ab39352b9f2000ac467', class: "items", role: "menu" }, h("slot", { key: '7638540cf9ccb7d5d2b169cbd514a4b7e1428e5b', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-menu-section-deprecated.entry.js CHANGED Viewed

@@ -45,7 +45,7 @@ const ZMenuSectionDeprecated = class {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '9f5e6272fec856fc30b8f00632105cf2d41f53cc', role: "menu", open: this.open }, h("button", { key: '31fbf5069fe344a43e5835f14459300dcf3359ac', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '789bf049b23b099e4fb07f12a3fa5a80a221f833', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'ffc7213860bca2db3fc12d575aaf26a0c598caaa', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '14cc6b2bb5f80030df79598464af61c4e375293b', class: "items" }, h("slot", { key: '830b84cf4ce1028c7cfed3ec5051f206f742e66f', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: 'c7d2a29ae2e56daa03be387dbf1f5f9e48185962', role: "menu", open: this.open }, h("button", { key: 'ec6cb222a29976ce929101a30f3cdefd12bf78bb', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '91fc9b115c4b6a161efe7f043e59cb326e3b01e3', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '0b186924f29ddb7da4848cfb6de49a6289050d14', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '6b366b818ffaeb799d5892d5e640ca42f0ffd3fe', class: "items" }, h("slot", { key: '57fe732de25b22342d8be5bb83084429e398838a', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/z-menu-section.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { g as KeyboardCode } from './index-a63060e9.js';
+import { g as KeyboardCode } from './index-ee40e66b.js';
 const stylesCss = ":host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-secondary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot=\"section\"]:last-of-type){border:none}::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}::slotted([slot=\"section\"]:hover),::slotted([slot=\"section\"]:focus:focus-visible),::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuSectionStyle0 = stylesCss;
@@ -173,7 +173,7 @@ const ZMenuSection = class {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '8055d8257a832f25940c0a754bd58497fa4bd0a0', open: this.open }, h("button", { key: '311bb43cd08cb379973701c416744ee27e3747f8', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'd6a00928ca6a80ccdec98164979ccb2681c130c5', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '976be6f35df99772aa82d82a60c86f3c09ca585a', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'd963f28d3d70563f01b9995194c941de9197cc1f', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'b42437ebb6c0c0373e4773f1930e527ed3a4697e', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '3414a4946d0a2d96ce03c8e95d76a1d6162caf9f', open: this.open }, h("button", { key: 'e24e50fb417480d60b61cc6b90364cf99e9430f3', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'fb0d0e06e5069ca713b47cfbb014268d52ccfeb2', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '3556ad182adf9b4c9111e3568091850ced8ae498', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'c5c5aaca5aa108ef52c5af22deeeca77d773eb93', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '4ff2f603482147dc49c8dcb0a72d27d5292e156d', name: "section", onSlotchange: this.onItemsChange }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-menu.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { g as KeyboardCode } from './index-a63060e9.js';
-import { a as containsElement } from './utils-305762b5.js';
+import { g as KeyboardCode } from './index-ee40e66b.js';
+import { a as containsElement } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
 const stylesCss = ":host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-secondary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-secondary01);content:\"\"}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot=\"item\"]:last-child){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";