@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

package/dist/cjs/z-app-header-deprecated.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-app-header-deprecated.cjs.entry.js","mappings":"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","names":["h","ButtonVariant","ControlSize","Host","OffCanvasVariant","TransitionDirection"],"sources":["src/components/deprecated/z-app-header-deprecated/styles.css?tag=z-app-header-deprecated&encapsulation=shadow","src/components/deprecated/z-app-header-deprecated/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --app-header-typography-1-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n   * @prop --app-header-typography-2-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n   * @prop --app-header-typography-3-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n   * @prop --app-header-typography-4-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n   * @prop --app-header-typography-5-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n   * @prop --app-header-typography-6-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n   * @prop --app-header-typography-7-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n   * @prop --app-header-typography-8-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n   * @prop --app-header-typography-9-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n   * @prop --app-header-typography-10-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n   * @prop --app-header-typography-11-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n   * @prop --app-header-typography-12-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n   * @prop --app-header-typography-1-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n   * @prop --app-header-typography-2-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n   * @prop --app-header-typography-3-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n   * @prop --app-header-typography-4-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n   * @prop --app-header-typography-5-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n   * @prop --app-header-typography-6-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n   * @prop --app-header-typography-7-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n   * @prop --app-header-typography-8-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n   * @prop --app-header-typography-9-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n   * @prop --app-header-typography-10-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n   * @prop --app-header-typography-11-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n   * @prop --app-header-typography-12-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n   * @prop --app-header-typography-1-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n   * @prop --app-header-typography-2-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n   * @prop --app-header-typography-3-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n   * @prop --app-header-typography-4-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n   * @prop --app-header-typography-5-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n   * @prop --app-header-typography-6-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n   * @prop --app-header-typography-7-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n   * @prop --app-header-typography-8-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n   * @prop --app-header-typography-9-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n   * @prop --app-header-typography-10-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n   * @prop --app-header-typography-11-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n   * @prop --app-header-typography-12-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n   * @prop --app-header-height: Defaults to `auto`.\n   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n   * @prop --app-header-drawer-trigger-size: The size of the drawer icon. Defaults to `--space-unit * 4`.\n   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-text-color: Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n   * @prop --app-header-title-font-size: Variable to customize the title's font size. NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. Defaults to `--app-header-typography-3-size`.\n   * @prop --app-header-title-lineheight: Variable to customize the title's line-height. NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-lineheight`.\n   * @prop --app-header-title-letter-spacing: Variable to customize the title's letter-spacing. NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-tracking`.\n   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n   */\n  --app-header-typography-1-size: 24px;\n  --app-header-typography-2-size: 28px;\n  --app-header-typography-3-size: 32px;\n  --app-header-typography-4-size: 36px;\n  --app-header-typography-5-size: 42px;\n  --app-header-typography-6-size: 48px;\n  --app-header-typography-7-size: 54px;\n  --app-header-typography-8-size: 60px;\n  --app-header-typography-9-size: 68px;\n  --app-header-typography-10-size: 76px;\n  --app-header-typography-11-size: 84px;\n  --app-header-typography-12-size: 92px;\n  --app-header-typography-1-lineheight: 1.33;\n  --app-header-typography-2-lineheight: 1.29;\n  --app-header-typography-3-lineheight: 1.25;\n  --app-header-typography-4-lineheight: 1.24;\n  --app-header-typography-5-lineheight: 1.24;\n  --app-header-typography-6-lineheight: 1.25;\n  --app-header-typography-7-lineheight: 1.2;\n  --app-header-typography-8-lineheight: 1.26;\n  --app-header-typography-9-lineheight: 1.24;\n  --app-header-typography-10-lineheight: 1.26;\n  --app-header-typography-11-lineheight: 1.2;\n  --app-header-typography-12-lineheight: 1.2;\n  --app-header-typography-1-tracking: calc(-0.2 / 1em);\n  --app-header-typography-2-tracking: calc(-0.4 / 1em);\n  --app-header-typography-3-tracking: calc(-0.6 / 1em);\n  --app-header-typography-4-tracking: calc(-0.8 / 1em);\n  --app-header-typography-5-tracking: calc(-1 / 1em);\n  --app-header-typography-6-tracking: calc(-1.2 / 1em);\n  --app-header-typography-7-tracking: calc(-1.4 / 1em);\n  --app-header-typography-8-tracking: calc(-1.6 / 1em);\n  --app-header-typography-9-tracking: calc(-1.8 / 1em);\n  --app-header-typography-10-tracking: calc(-2 / 1em);\n  --app-header-typography-11-tracking: calc(-2.2 / 1em);\n  --app-header-typography-12-tracking: calc(-2.4 / 1em);\n  --app-header-content-max-width: 100%;\n  --app-header-height: auto;\n\n  /* Variable to set stuck header and drawer's top offset.\n  Useful when something is absolutely positioned above the header. */\n  --app-header-top-offset: 48px;\n  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);\n\n  /* Variable to customize header background color. */\n  --app-header-bg: var(--color-surface01);\n\n  /* Variable to customize stuck header background color. */\n  --app-header-stucked-bg: var(--color-surface01);\n\n  /* Variable to customize text and icon color. */\n  --app-header-text-color: var(--color-default-text);\n\n  /* Variable to customize the title's font size.\n  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */\n  --app-header-title-font-size: var(--app-header-typography-3-size);\n\n  /* Variable to customize the title's line-height.\n  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n  /* Variable to customize the title's letter-spacing.\n  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value\n  and use the same level as the one of the font size. */\n  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n  /* Variable to customize stuck header's text and icon color. */\n  --app-header-stucked-text-color: var(--color-default-text);\n\n  position: relative;\n  display: block;\n  height: var(--app-header-height);\n  color: var(--app-header-text-color);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: var(--grid-margin);\n  margin: 0 auto;\n  background: var(--app-header-bg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n  background: transparent;\n}\n\n:host(:empty) .heading-panel {\n  padding: 0;\n}\n\n.heading-container {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n\n.heading-title {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  margin: 0;\n  font-family: \"IBM Plex Serif\", serif;\n  font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n  font-size: var(--app-header-title-font-size);\n  letter-spacing: var(--app-header-title-letter-spacing);\n  line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n  font-size: var(--app-header-typography-3-size);\n  letter-spacing: var(--app-header-typography-3-tracking);\n  line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-size: 20px;\n  font-style: italic;\n  line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n  font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  font-weight: 400;\n}\n\n.menu-container {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n  display: none;\n}\n\n.menu-container ::slotted([open]) {\n  position: relative;\n  z-index: 3;\n}\n\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: auto;\n  min-width: calc(var(--space-unit) * 32);\n  flex: 1 auto;\n  align-items: center;\n  margin-left: auto;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset);\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  animation: slide-stuck-heading-in 250ms ease-out;\n  background: var(--app-header-stucked-bg);\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n  column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n  overflow: hidden;\n}\n\n.heading-stuck .heading-title > *,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n  margin-left: auto;\n}\n\n.drawer-trigger {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\n\n  fill: currentcolor;\n}\n\n/* Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title */\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n  display: flex;\n  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n  margin-left: auto;\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: var(--app-header-drawer-trigger-size);\n  --z-icon-height: var(--app-header-drawer-trigger-size);\n\n  padding: 0;\n  border: 0;\n  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n  appearance: none;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  fill: currentcolor;\n  font-size: inherit;\n  outline: none;\n}\n\n.drawer-close:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n  color: var(--color-white);\n  fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n  --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--color-black);\n  content: \"\";\n  opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted(*) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: top center;\n  -webkit-user-drag: none;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-6-size);\n    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n  }\n\n  .heading-panel {\n    flex-flow: row wrap;\n    align-items: center;\n    padding-bottom: calc(var(--space-unit) * 2);\n  }\n\n  .heading-container {\n    margin-right: auto;\n  }\n\n  :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n    width: auto;\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n    padding-left: 0;\n  }\n\n  .menu-container {\n    flex: initial;\n    align-items: center;\n  }\n\n  :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .menu-container {\n    gap: var(--space-unit) calc(var(--space-unit) * 5);\n  }\n\n  :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n    display: none;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-7-size);\n    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n  }\n\n  .heading-panel {\n    justify-content: flex-start;\n    padding-bottom: calc(var(--space-unit) * 3);\n  }\n\n  .heading-container,\n  .menu-container {\n    width: auto;\n  }\n\n  :host([flow=\"stack\"]) .heading-panel {\n    flex-flow: column;\n    align-items: flex-start;\n  }\n\n  :host([flow=\"stack\"]) .menu-container {\n    width: 100%;\n  }\n\n  :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n    row-gap: calc(var(--space-unit) * 3);\n  }\n\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n    flex: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host {\n    --app-header-title-font-size: var(--app-header-typography-9-size);\n    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n  }\n}\n\n@keyframes slide-stuck-heading-in {\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n\n  100% {\n    transform: none;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n */\n@Component({\n  tag: \"z-app-header-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeaderDeprecated implements ComponentInterface {\n  @Element() hostElement: HTMLZAppHeaderDeprecatedElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * Set the hero image source for the header.\n   * You can also use a [slot=\"hero\"] node for advanced customization.\n   */\n  @Prop()\n  hero: string;\n\n  /**\n   * Should place an overlay over the hero image.\n   * Useful for legibility purpose.\n   */\n  @Prop({reflect: true})\n  overlay = false;\n\n  /**\n   * Control menu bar position in the header.\n   * - auto: the menu bar is positioned near the title\n   * - stack: the menu bar is positioned below the title\n   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n   */\n  @Prop({reflect: true})\n  flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({reflect: true})\n  drawerOpen = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current viewport.\n   * Used to change the aspect of the search button (icon only) on mobile and tablet.\n   */\n  @State()\n  private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  menuLength: number;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  private container?: HTMLDivElement;\n\n  private menuElements?: NodeListOf<HTMLElement>;\n\n  private observer?: IntersectionObserver =\n    SUPPORT_INTERSECTION_OBSERVER &&\n    new IntersectionObserver(\n      ([entry]) => {\n        this._stuck = !entry.isIntersecting;\n      },\n      {\n        threshold: 0.5,\n      }\n    );\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n  }\n\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  evaluateViewport(): void {\n    if (window.innerWidth < 768) {\n      this.currentViewport = \"mobile\";\n    } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n      this.currentViewport = \"tablet\";\n    } else {\n      this.currentViewport = \"desktop\";\n    }\n  }\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    const elements = this.menuElements;\n    elements.forEach((element) => {\n      (element as HTMLZMenuDeprecatedElement).open = false;\n      (element as HTMLZMenuDeprecatedElement).floating = !this.drawerOpen;\n      (element as HTMLZMenuDeprecatedElement).verticalContext = this.drawerOpen;\n    });\n  }\n\n  private get title(): string {\n    const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n    if (titleElement === null) {\n      return \"\";\n    }\n\n    return titleElement.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n  }\n\n  private get canShowSearchbar(): boolean {\n    if (!this.enableSearch) {\n      return false;\n    }\n\n    // Always show the searchbar on desktop, even if a searchPageUrl is set\n    if (this.searchPageUrl) {\n      return this.currentViewport === \"desktop\";\n    }\n\n    return true;\n  }\n\n  /**\n   * Whether the header has a hero image, either as a prop or as a slot.\n   */\n  private get hasHero(): boolean {\n    return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n  }\n\n  private collectMenuElements(): void {\n    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuLength = menuElements.length;\n    this.setMenuFloatingMode();\n  }\n\n  private enableStuckObserver(): void {\n    if (this.observer) {\n      this.observer.observe(this.container);\n    }\n  }\n\n  private disableStuckMode(): void {\n    this._stuck = false;\n    if (this.observer) {\n      this.observer.unobserve(this.container);\n    }\n  }\n\n  @Watch(\"stuck\")\n  onStuckMode(): void {\n    if (this.stuck) {\n      this.enableStuckObserver();\n    } else {\n      this.disableStuckMode();\n    }\n  }\n\n  private renderSearchLinkButton(): HTMLZButtonElement | null {\n    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n      return null;\n    }\n\n    return (\n      <z-button\n        class=\"search-page-button\"\n        variant={ButtonVariant.SECONDARY}\n        href={this.searchPageUrl}\n        icon=\"search\"\n        size={ControlSize.X_SMALL}\n      ></z-button>\n    );\n  }\n\n  private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={searchButtonIconOnly}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  componentDidLoad(): void {\n    this.collectMenuElements();\n    this.onStuckMode();\n    this.evaluateViewport();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    return (\n      <Host menu-length={this.menuLength}>\n        {this.hasHero && (\n          <div class=\"hero-container\">\n            <slot name=\"hero\">\n              {this.hero && (\n                <img\n                  alt=\"\"\n                  src={this.hero}\n                />\n              )}\n            </slot>\n          </div>\n        )}\n\n        <div\n          class=\"heading-panel\"\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            <div class=\"heading-subtitle\">\n              <slot name=\"top-subtitle\"></slot>\n            </div>\n            <div class=\"heading-title\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <slot name=\"title\"></slot>\n\n              {this.renderSearchLinkButton()}\n            </div>\n\n            <div class=\"heading-subtitle\">\n              <slot name=\"subtitle\"></slot>\n            </div>\n          </div>\n\n          {(this.canShowMenu || this.canShowSearchbar) && (\n            <div class=\"menu-container\">\n              {this.canShowMenu && (\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                ></slot>\n              )}\n\n              {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n            </div>\n          )}\n        </div>\n\n        <z-offcanvas\n          variant={OffCanvasVariant.OVERLAY}\n          transitiondirection={TransitionDirection.RIGHT}\n          open={this.drawerOpen}\n          onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        >\n          <button\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\"></z-icon>\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            ></slot>\n          </div>\n        </z-offcanvas>\n\n        {this._stuck && (\n          <div class=\"heading-stuck\">\n            <div class=\"heading-stuck-content\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <div class=\"heading-title\">\n                <slot name=\"stucked-title\">{this.title}</slot>\n              </div>\n\n              {this.renderSearchLinkButton()}\n              {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-app-header_12.cjs.entry.js

@@ -3,10 +3,11 @@
 var index$1 = require('./index-D_S5lGcb.js');
 var index = require('./index-wGaSHN1_.js');
 var breakpoints = require('./breakpoints-B7vFm-3T.js');
-var utils = require('./utils-BY7xrW7W.js');
+var utils = require('./utils-DRCgbM7t.js');
 var iconset = require('./iconset-Cz-UsfoU.js');
+var reactiveController = require('./reactive-controller-BmGKM-4y.js');
 
-const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
+const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 const ZAppHeader = class {
@@ -191,7 +192,7 @@ const ZAppHeader = class {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (index$1.h("z-button", { class: "search-page-button", variant: index.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index.ControlSize.X_SMALL }));
         }
-        return (index$1.h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (index$1.h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
         return (index$1.h(index$1.Fragment, null, this.enableZLogo && (index$1.h("span", { class: "z-logo" }, index$1.h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (index$1.h("span", { class: "product-logo" }, index$1.h("slot", { name: "product-logo" })))));
@@ -275,7 +276,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (index$1.h(index$1.Host, { key: 'dba00e6ba8614f38c6382a42420430ee44d61757', "menu-length": this.menuLength }, index$1.h("div", { key: '14462adce8a9cb03fe571a4eea4c1356d77d49d5', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '18f406f950a9f2946d5c1c74e5c3a52c9f139069', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: '1e74736f45625644289425d0e5cc6c825c6ac2b9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '747325238cde4fb40d8448c58e4b6483ca049f28', name: "top-subtitle" }))), index$1.h("div", { key: '8d5159eabc8cddbb3fdc2227be62b5b1f318b1d4', class: "heading-title" }, index$1.h("slot", { key: '64c48e48e13c50d367fb52ed509d25cacbbc85da', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '990a282a81bd96d2524d3fbfff1dabce807824d9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: '0048e85cccd48f1a9e587dc40bfc54ebf6c603bc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '41423d5aa2004b61c6d9ef0342013598e4e59d55', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: '4e12bbc0d9a8b54ecec94b1b12ad456ebcdb5bec', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (index$1.h(index$1.Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, index$1.h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), index$1.h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, index$1.h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -300,7 +301,7 @@ const ZButton = class {
         /** defines a string value that labels the internal interactive element. Used for accessibility. */
         this.ariaLabel = undefined;
         /**
-         * **Deprecated:** Use `htmlrole` instead.
+         * Use `htmlrole` instead.
          * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
          */
         this.role = "";
@@ -358,7 +359,7 @@ const ZDivider = class {
         this.orientation = index.DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (index$1.h(index$1.Host, { key: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -406,13 +407,13 @@ const ZIcon = class {
      * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
      */
     renderColorIndicator() {
-        return (index$1.h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS["picker-color"])));
+        return (index$1.h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(iconset.ICONS["picker-color"])));
     }
     renderBaseIcon() {
-        return (index$1.h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS[this.getTransparentIndicatorIconIfNeeded()])));
+        return (index$1.h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(iconset.ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4a8e4edb8055077b821539897d38849acbccc5e1', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (index$1.h(index$1.Host, { key: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -697,7 +698,7 @@ const ZInput = class {
             default:
                 input = this.renderInputText(this.type);
         }
-        return index$1.h(index$1.Host, { key: 'bc35a655bec5191649c1089a66b41911359da847' }, input);
+        return index$1.h(index$1.Host, { key: '2536f6387f2325190522fc8cc4f788147bead800' }, input);
     }
     get hostElement() { return index$1.getElement(this); }
 };
@@ -726,7 +727,7 @@ const ZInputMessage = class {
         this.onMessageChange();
     }
     render() {
-        return (index$1.h(index$1.Host, Object.assign({ key: '2a344b237779b36f3c6fcbd41d1b96c71c08d286' }, this.statusRole), this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: 'dbd6314657659bc49619393ae30a1fbfd8051635', name: this.statusIcons[this.status] }), index$1.h("span", { key: 'fe39967aedc46a55bff2719881f793d0c0e9283b', id: this.htmlId, innerHTML: this.message })));
+        return (index$1.h(index$1.Host, Object.assign({ key: '575ca29cba9f2d617b8b2c65bb054204e7aa411c' }, this.statusRole), this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: '6b9a19626fac468cdf5773aebd66cba90489eaa3', name: this.statusIcons[this.status] }), index$1.h("span", { key: 'c951a0146f5fe8def8428aee39ce923b24aa23bb', id: this.htmlId, innerHTML: this.message })));
     }
     static get watchers() { return {
         "message": [{
@@ -772,7 +773,7 @@ const ZList = class {
         this.setChildrenSizeType();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f34729eb14ef690bf0aeb7da4b406e955a66fbf7' }, index$1.h("slot", { key: '82b4a9c72937797bb8f7e4141f7a4c609908c702' })));
+        return (index$1.h(index$1.Host, { key: '2aac86dccac20cc21ec7c1341a99298f8523af49' }, index$1.h("slot", { key: '207231c63243efcd61917a9b4aa3394e22379bbd' })));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -939,7 +940,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '565d88705b517e78e6b9c05f5923903704472751', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, index$1.h("div", { key: '6a1ccb7af0b9455e52e4b0b7699722a2f2e98f01', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, index$1.h("div", { key: '64a7d40c04afdb7cd9fc1f090926d7de10341ef4', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: 'e781e6f655bd4a7d0987fef33d8b426caa7ed0aa', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (index$1.h(index$1.Host, { key: '9a06293fba7e3b74fe169d1d3e927a4abd7b17f1', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, index$1.h("div", { key: 'c962c30a71313bd84b1075ad03a96e4b5de77a42', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, index$1.h("div", { key: 'ccca86019dec23767ae7bcf5af988c7f2366d850', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: 'f8f1b6053d0fe0415b520c4f1deaba92e24019b8', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -992,20 +993,21 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a2b30a3071d35ba28d8e485ff92a88e537a85290' }, index$1.h("div", { key: '528f17bfa6de4ccb252e86ec424b388f3d6d4ff0', class: {
+        return (index$1.h(index$1.Host, { key: 'cd9bd738252e44011edad7b468ad711a2ef83f12' }, index$1.h("div", { key: 'd2c2e41d50b4884b438ae7b25e9e2b06260df6ac', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, index$1.h("slot", { key: '318ed932865eef9943a0f7ff7ae87e02a2ce968e', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: '3d6d1ea46c42420c86b4f5f22bf5d5bcb1c5268f', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: 'f02a9b862b895d421be12ba4eb9625269f086e03' })));
+            } }, index$1.h("slot", { key: 'c47a8ea2508c87bbd0688248dcae0350d159350a', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: 'c0586eee517b42aaf76507286bd086abaecb8013', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: '5f558529f5de2f4b62403d239e8424eea6259fd3' })));
     }
     get host() { return index$1.getElement(this); }
 };
 ZListGroup.style = stylesCss$5();
 
-const stylesCss$4 = () => `.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;
+const stylesCss$4 = () => `.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;outline:none}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;
 
-const ZOffcanvas = class {
+const ZOffcanvas = class extends reactiveController.ReactiveControllerHost {
     constructor(hostRef) {
+        super();
         index$1.registerInstance(this, hostRef);
         this.canvasOpenStatusChanged = index$1.createEvent(this, "canvasOpenStatusChanged", 7);
         /**
@@ -1026,64 +1028,23 @@ const ZOffcanvas = class {
         /**
          * Skip the opening transition when the offcanvas is already open at the first render.
          * @deprecated This prop is not needed anymore, the component will automatically skip the transition
-         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+         * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
          */
         this.skipLoadAnimation = false;
-        /** Whether to show the backdrop when the offcanvas is open. Default: true */
+        /** Whether to show the backdrop when the offcanvas is open and variant is not `pushcontent`. Default: `true` */
         this.showBackdrop = true;
         /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
-    }
-    /**
-     * Returns all focusable elements inside the offcanvas content.
-     * Elements are considered focusable if:
-     * - They are not disabled
-     * - They are visible in the layout
-     * - They have a non-negative tabIndex or an explicit tabindex="0"
-     */
-    getFocusableElements() {
-        if (!this.canvasContent) {
-            return [];
-        }
-        const all = Array.from(this.canvasContent.querySelectorAll("*"));
-        return all.filter((el) => {
-            const tabindex = el.getAttribute("tabindex");
-            const isDisabled = el.hasAttribute("disabled");
-            const isHidden = el.offsetParent === null;
-            return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === "0");
+        this.focusTrapController = new reactiveController.FocusTrapController(this, {
+            fallbackFocus: () => this.canvasContent,
+            isActive: () => this.open && this.variant === index.OffCanvasVariant.OVERLAY,
         });
     }
     /**
-     * Keeps keyboard navigation trapped inside the offcanvas when it is open.
-     * Implements circular tab navigation:
-     * - If Shift + Tab is pressed on the first focusable element, move focus to the last.
-     * - If Tab is pressed on the last focusable element, move focus to the first.
-     */
-    trapFocus(event) {
-        if (!this.allFocusableElements.length) {
-            return;
-        }
-        const first = this.allFocusableElements[0];
-        const last = this.allFocusableElements[this.allFocusableElements.length - 1];
-        const active = document.activeElement;
-        if (event.shiftKey && active === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        if (!event.shiftKey && active === last) {
-            event.preventDefault();
-            first.focus();
-        }
-    }
-    /**
-     * Handles keyboard interactions when the offcanvas is open.
-     * - Closes the offcanvas when the Escape key is pressed.
-     * - Traps focus inside the component when the Tab key is used.
+     * Handles Escape and wrap-around Tab navigation at the focus boundaries.
      */
     handleKeyDown(event) {
-        if (!this.open) {
+        if (!this.open || this.variant !== index.OffCanvasVariant.OVERLAY) {
             return;
         }
         if (event.key === index.KeyboardCode.ESC) {
@@ -1091,80 +1052,52 @@ const ZOffcanvas = class {
             this.open = false;
             return;
         }
-        if (event.key === index.KeyboardCode.TAB) {
-            this.trapFocus(event);
-        }
-    }
-    /**
-     * Stop the event default behavior and propagation when the offcanvas is closed.
-     */
-    stopEvent(event) {
-        if (this.open) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
+        this.focusTrapController.handleWrapTab(event);
     }
     /**
-     * Hide the body overflow when the offcanvas is open.
+     * Lock the page scroll when the offcanvas is open and unlock it when the offcanvas is closed.
      */
-    handlePageOverflow() {
+    handlePageScroll() {
         const overflow = this.variant === index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP
             ? "overflow-y"
             : "overflow-x";
-        document.body.style[overflow] = this.open ? "hidden" : "";
+        this.host.ownerDocument.body.style[overflow] = this.open ? "hidden" : "";
     }
     onOpenChanged() {
-        var _a, _b, _c;
         this.canvasOpenStatusChanged.emit(this.open);
-        if (this.open) {
-            // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.
-            this.previouslyFocusedElement = document.activeElement;
-            // Move focus inside the offcanvas once it is rendered.
-            if (this.allFocusableElements.length > 0) {
-                this.allFocusableElements[0].focus();
-            }
-            else {
-                (_a = this.canvasContent) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            this.handlePageOverflow();
-        }
-        else {
-            // Restore focus to the element that was focused before the offcanvas was opened.
-            (_b = this.previouslyFocusedElement) === null || _b === void 0 ? void 0 : _b.focus();
-            // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.
-            const listenerCallback = () => {
-                this.handlePageOverflow();
-                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
-            };
-            (_c = this.canvasContainer) === null || _c === void 0 ? void 0 : _c.addEventListener("transitionend", listenerCallback);
-        }
+        this.handlePageScroll();
+        this.focusTrapController.sync();
     }
     componentWillLoad() {
         if (this.open) {
-            this.skipAnimation = true;
+            this.skipAnimation = true; // TODO: remove this line when `skipLoadAnimation` prop is removed.
         }
-    }
-    componentDidLoad() {
-        this.handlePageOverflow();
+        return super.componentWillLoad();
     }
     componentDidRender() {
-        this.skipAnimation = false;
-        this.allFocusableElements = this.getFocusableElements();
+        this.skipAnimation = false; // TODO: remove this line when `skipLoadAnimation` prop is removed.
     }
-    connectedCallback() {
-        this.handlePageOverflow();
+    componentDidLoad() {
+        if (this.open) {
+            this.onOpenChanged();
+        }
     }
     disconnectedCallback() {
-        this.open = false;
+        this.handlePageScroll();
+        super.disconnectedCallback();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '4a7d050590730574ccb25ecd1f93032fac113549', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, index$1.h("div", { key: '4507bf74ea9c8b097173ed048cd52af0704b8fb6', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, index$1.h("div", { key: '79c69732bcdf90d5dc25713bdec66034b595f75d', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, index$1.h("slot", { key: 'f133b7048d147138f4db154f2591070b5c74bd8a', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
-            this.showBackdrop && (index$1.h("div", { key: '885eeed8b2ebd31467366f208c5f66eace44ad0c', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (index$1.h(index$1.Host, { key: '4c4618f2e9aab0a70dda9dd00a76362dd608a615', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "dialog" : null }, index$1.h("div", { key: '6d4857797f27eddf7f57779354e56155b609cd19', class: "canvas-container" }, index$1.h("div", { key: '33fa25492ff5dc2a47d5287c0e08817cab1afea7', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: '445706a313856e2f498455671b41a8674578a3df', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
+            this.showBackdrop && (index$1.h("div", { key: '28a34fdcc90378ab340dc3626f14b19cb02d9bae', class: "backdrop", onClick: (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = false;
+            } }))));
     }
+    get host() { return index$1.getElement(this); }
     static get watchers() { return {
         "variant": [{
-                "handlePageOverflow": 0
+                "handlePageScroll": 1
             }],
         "open": [{
                 "onOpenChanged": 0
@@ -1385,17 +1318,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index$1.h(index$1.Host, { key: 'cf8441e139a28aa53bd6d61c4b17a12739998d59', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: 'b24a5060ef65a27fa1096ca0056f1f2d566c9aca', class: "input-container" }, index$1.h("z-input", { key: 'fa2648f2a11a83dedbd9c1c5d00712675713936d', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (index$1.h(index$1.Host, { key: 'a08d7cbf665fc71a412f13ce8e6d0424ceeb929d', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: 'd5987d36585f496b8eebc3eeda36815d629c0b2a', class: "input-container" }, index$1.h("z-input", { key: 'cb54997fa4598f8b746c8f0685c283facb8545a6', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 utils.handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
             }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (index$1.h("div", { key: '060a4065341f54257d85e8989f55f3b6e8fe1505', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (index$1.h("div", { key: 'e872905bfe52aef6fa6c49579c7d12e1ebc66bb9', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (index$1.h("z-button", { key: 'e37aec8f5feb61ab23fe0c497a11290d2b121375', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (index$1.h("z-button", { key: '5fcbf61d74fd3294f1de8ae9a2a7432ddd894bd4', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -1422,10 +1355,10 @@ const ZTag = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '79058b7bd9a1c161e6bc55fc0a737e6f2f3c8a06', class: {
+        return (index$1.h(index$1.Host, { key: 'eafe79f7342455535bc2d0550819506bb5f2417d', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && index$1.h("z-icon", { key: 'ac25c974cbb40a04bb83adabe53011bb4dd89dd3', name: this.icon }), index$1.h("div", { key: '4150a1f6301110f690a595c5e2b5169d90aa4802' }, index$1.h("slot", { key: 'd3f2e88bf2635ec142a71c5752f264cd9e0077f7' }))));
+            } }, this.icon && index$1.h("z-icon", { key: 'a0cb672be061f30da008e60acf3d8104faf00e9d', name: this.icon }), index$1.h("div", { key: '688919faeafac3d13f92a7a24d0f1a4c54570d79' }, index$1.h("slot", { key: '129f3625ee07bfb97a1c23e65b6014427a5d8232' }))));
     }
     get host() { return index$1.getElement(this); }
 };
@@ -1443,3 +1376,6 @@ exports.z_list_group = ZListGroup;
 exports.z_offcanvas = ZOffcanvas;
 exports.z_searchbar = ZSearchbar;
 exports.z_tag = ZTag;
+//# sourceMappingURL=z-app-header.z-button.z-divider.z-icon.z-input.z-input-message.z-list.z-list-element.z-list-group.z-offcanvas.z-searchbar.z-tag.entry.cjs.js.map
+
+//# sourceMappingURL=z-app-header_12.cjs.entry.js.map