@zanichelli/albe-web-components 19.1.3 → 19.2.0

package/dist/esm/z-tool.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-tool.entry.js","mappings":"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","names":[],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/tokens/typography.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n.z-tool {\n  --z-tool-size: calc(var(--space-unit) * 5.5);\n  --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n  position: relative;\n  display: inline-flex;\n  width: var(--z-tool-size);\n  height: var(--z-tool-size);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\n:host(:is([active], [open])) .z-tool {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n  background: var(--color-primary03);\n}\n\n@media (hover: hover) {\n  :host(:hover),\n  :host(.z-tool-tooltip-open) {\n    /* ensure any open tooltip is shown over sibling elements */\n    z-index: 1;\n  }\n\n  :host(:not([disabled])) .z-tool:hover {\n    background-color: var(--color-primary03);\n  }\n}\n\n.z-tool:focus:focus-visible {\n  background-color: var(--color-primary03);\n  outline: none;\n}\n\nz-icon {\n  --z-icon-width: var(--z-tool-icon-size);\n  --z-icon-height: var(--z-tool-icon-size);\n\n  display: block;\n  fill: var(--color-default-icon);\n}\n\n:host([disabled]) .z-tool {\n  color: var(--color-disabled01-icon);\n  cursor: not-allowed;\n}\n\n:host([disabled]) z-icon {\n  fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n  --z-tooltip-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  --z-tooltip-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n  position: relative;\n  z-index: 2;\n  font-family: var(--font-family-sans);\n  white-space: nowrap;\n}\n\n.z-tool-submenu {\n  z-index: 3;\n  border-radius: calc(var(--border-radius) + var(--border-size-small));\n}\n\n.z-tool-submenu ::slotted(z-color-picker) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n@media (max-width: 767px) and (hover: none) {\n  .z-tool-tooltip {\n    display: none !important;\n  }\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) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 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  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\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  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\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  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\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  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\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, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZTool {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: IconName;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual active state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * The value of this prop is passed down to the `z-icon` component inside the tool.\n   *\n   * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n   * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n   */\n  @Prop({mutable: true})\n  indicatorColor?: string;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isMobile = false;\n\n  /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n  @State()\n  hasNestedOpenTools = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  /** Emitted when the tooltip open state changes. */\n  @Event()\n  toggleTooltip: EventEmitter;\n\n  private buttonRef?: HTMLButtonElement;\n\n  private iconRef?: HTMLElement;\n\n  private tooltipRef?: HTMLZTooltipElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  /** Indicates if the tool is nested inside another tool. */\n  private isNested = false;\n\n  /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n  private mainToolbar?: HTMLZToolbarElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /**\n   * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n   */\n  private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  /**\n   * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n   */\n  private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  /**\n   * Handles click events on the tool's button element.\n   * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n   * or the first item if no active/selected item is found.\n   */\n  private handleClick = (): void => {\n    if (this.disabled || !this.hasSlottedContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n      if (colorPicker) {\n        colorPicker.setFocus();\n\n        return;\n      }\n\n      // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n      const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n        \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n      ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n      firstActiveOrEnabledNestedTool?.setFocus();\n    }\n  };\n\n  /**\n   * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n   */\n  private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n    if ((event.target as HTMLElement) === this.tooltipRef) {\n      return;\n    }\n\n    this.tooltipOpen = event.detail.open;\n  };\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  @Watch(\"tooltipOpen\")\n  handleTooltipOpenChange(): void {\n    this.toggleTooltip.emit(this.tooltipOpen);\n  }\n\n  /**\n   * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.hasNestedOpenTools) {\n      return;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ESC:\n        event.stopPropagation();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.TAB:\n        if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n          this.open = false;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Close the popover on clicks outside the component, only if there are no nested open tools.\n   * In that case any outside click should close the nested submenu(s) first.\n   */\n  @Listen(\"click\", {target: \"body\"})\n  onOutsideClick(event: MouseEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"toggleSubmenu\")\n  onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n    if (ev.target === this.hostElement) {\n      return;\n    }\n\n    if (ev.detail === true) {\n      this.hasNestedOpenTools = true;\n\n      return;\n    }\n\n    this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n  }\n\n  /**\n   * Handles the `colorSelected` event from a nested `z-color-picker` component.\n   * Updates the `indicatorColor` and closes the tool's popover.\n   */\n  @Listen(\"colorSelected\")\n  handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n    if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n      return;\n    }\n\n    this.indicatorColor = event.detail;\n    this.open = false;\n    this.setFocus();\n  }\n\n  /**\n   * Close the submenu when focus moves outside the tool.\n   */\n  @Listen(\"focusin\", {target: \"body\", passive: true})\n  handleExternalFocusin(ev: FocusEvent): void {\n    const target = ev.target as Node;\n    if (!containsElement(this.hostElement, target)) {\n      this.open = false;\n    }\n  }\n\n  /** Focuses the tool's button element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.disabled) {\n      return;\n    }\n\n    setTimeout(() => {\n      this.buttonRef?.focus();\n    }, 50);\n  }\n\n  /** Sets the tab index of the tool's internal button element. */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    if (!this.buttonRef) {\n      return;\n    }\n\n    this.buttonRef.tabIndex = this.disabled ? -1 : value;\n  }\n\n  /** Closes the tooltip. */\n  @Method()\n  async closeTooltip(): Promise<void> {\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n    this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n    this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          ref={(el) => (this.buttonRef = el)}\n          aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n            indicatorColor={this.indicatorColor}\n          ></z-icon>\n        </button>\n        {this.tooltip && (\n          <z-tooltip\n            class=\"z-tool-tooltip\"\n            ref={(el) => (this.tooltipRef = el)}\n            bindTo={this.iconRef}\n            open={this.tooltipOpen && !this.open}\n            position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n            dark\n            onMouseLeave={this.handleTooltipClose}\n            onBlur={this.handleTooltipClose}\n            onOpenChange={this.onTooltipOpenChange}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-tooltip>\n        )}\n        {this.hasSlottedContent && (\n          <z-popover\n            class=\"z-tool-submenu\"\n            open={this.open}\n            bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n            center\n            /* disable auto-close to prevent unwanted close behaviors on mobile,\n            when the bound element is the main toolbar */\n            closable={false}\n            position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n          >\n            <slot></slot>\n          </z-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/z-toolbar.entry.js

@@ -0,0 +1,144 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { g as KeyboardCode } from './index-106473a8.js';
+
+const stylesCss = ":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}";
+const ZToolbarStyle0 = stylesCss;
+
+const ZToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** List of focusable tool elements. */
+        this.toolItems = [];
+        this.htmlAriaLabel = undefined;
+        this.currentFocusIndex = 0;
+    }
+    componentDidLoad() {
+        this.collectToolItems();
+        this.updateTabIndexes();
+        // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows
+        let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns") || "6");
+        mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;
+        this.hostElement.style.setProperty("--z-toolbar-columns", mobileColumnCount.toString());
+    }
+    /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */
+    collectToolItems() {
+        this.toolItems = Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"));
+    }
+    /**
+     * Update the `tabindex` of all children tools based on the current focus index,
+     * so that only the currently focusable tool is in the tab order (tabindex="0") and all others are not focusable via keyboard (tabindex="-1").
+     */
+    updateTabIndexes() {
+        this.toolItems.forEach((tool, index) => {
+            tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);
+        });
+    }
+    focusToolAt(index, fallback = "next") {
+        const tool = this.toolItems[index];
+        if (!tool) {
+            return;
+        }
+        this.currentFocusIndex = index;
+        if (!tool.disabled) {
+            tool.setFocus();
+            this.updateTabIndexes();
+            return;
+        }
+        if (fallback === "next") {
+            this.focusNextTool();
+        }
+        else {
+            this.focusPreviousTool();
+        }
+    }
+    focusNextTool() {
+        const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;
+        this.focusToolAt(nextIndex);
+    }
+    focusPreviousTool() {
+        const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;
+        this.focusToolAt(prevIndex, "previous");
+    }
+    /**
+     * Listen for custom "toggleSubmenu" events from child tools and close sibling submenus when one is opened,
+     * to prevent multiple submenus from being open at the same time.
+     */
+    closeSiblingSubmenusOnOpen(event) {
+        if (event.detail !== true) {
+            return;
+        }
+        const targetTool = event.target.closest("z-tool");
+        if (!targetTool || !this.toolItems.includes(targetTool)) {
+            return;
+        }
+        this.toolItems.forEach((tool) => {
+            if (tool !== targetTool && tool.open) {
+                tool.open = false;
+            }
+        });
+    }
+    /**
+     * Listen for custom "toggleTooltip" events from child tools and close sibling tooltips when one is opened,
+     * to prevent multiple tooltips from being open at the same time.
+     */
+    closeSiblingTooltipsOnOpen(event) {
+        if (event.detail !== true) {
+            return;
+        }
+        const targetTool = event.target;
+        if (!this.toolItems.includes(targetTool)) {
+            return;
+        }
+        this.toolItems.forEach((tool) => {
+            if (tool !== targetTool) {
+                tool.closeTooltip();
+            }
+        });
+    }
+    handleKeyDown(event) {
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        if (!toolElement || !this.toolItems.includes(toolElement)) {
+            return;
+        }
+        const focusedIndex = this.toolItems.indexOf(toolElement);
+        if (focusedIndex !== -1) {
+            this.currentFocusIndex = focusedIndex;
+        }
+        switch (event.key) {
+            case KeyboardCode.ARROW_RIGHT:
+                event.preventDefault();
+                this.focusNextTool();
+                break;
+            case KeyboardCode.ARROW_LEFT:
+                event.preventDefault();
+                this.focusPreviousTool();
+                break;
+        }
+    }
+    /**
+     * When focus enters the toolbar, update the current focus index to match the focused tool,
+     * so that roving tabindex is in sync with actual focus.
+     */
+    handleFocusIn(event) {
+        const target = event.target;
+        const toolElement = target.closest("z-tool");
+        const index = this.toolItems.indexOf(toolElement);
+        if (index !== -1 && index !== this.currentFocusIndex) {
+            this.currentFocusIndex = index;
+            this.updateTabIndexes();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'eb195bd6bb7d19e7958492c96761572838e2a881', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '6283d32e6e5568a890ff9c404d152800269cda99', onSlotchange: () => {
+                this.collectToolItems();
+                this.updateTabIndexes();
+            } })));
+    }
+    get hostElement() { return getElement(this); }
+};
+ZToolbar.style = ZToolbarStyle0;
+
+export { ZToolbar as z_toolbar };
+
+//# sourceMappingURL=z-toolbar.entry.js.map

package/dist/esm/z-toolbar.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-toolbar.entry.js","mappings":"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","names":[],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  padding: 0;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */\n  box-shadow: var(--shadow-4);\n  gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n  height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n  :host {\n    --z-toolbar-columns: 6;\n\n    position: relative;\n    display: grid;\n    max-width: 100%;\n\n    /* Draws a horizontal separator line between rows */\n    background: repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n    gap: var(--border-size-small) calc(var(--space-unit) / 2);\n    grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));\n  }\n\n  ::slotted(z-divider) {\n    display: none !important;\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n    mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n  }\n\n  /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  /**\n   * Update the `tabindex` of all children tools based on the current focus index,\n   * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n   */\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (!tool) {\n      return;\n    }\n\n    this.currentFocusIndex = index;\n    if (!tool.disabled) {\n      tool.setFocus();\n      this.updateTabIndexes();\n\n      return;\n    }\n\n    if (fallback === \"next\") {\n      this.focusNextTool();\n    } else {\n      this.focusPreviousTool();\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  /**\n   * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n   * to prevent multiple submenus from being open at the same time.\n   */\n  @Listen(\"toggleSubmenu\")\n  closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n    if (!targetTool || !this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool && tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  /**\n   * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n   * to prevent multiple tooltips from being open at the same time.\n   */\n  @Listen(\"toggleTooltip\")\n  closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = event.target;\n    if (!this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool) {\n        tool.closeTooltip();\n      }\n    });\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n    }\n  }\n\n  /**\n   * When focus enters the toolbar, update the current focus index to match the focused tool,\n   * so that roving tabindex is in sync with actual focus.\n   */\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n    const index = this.toolItems.indexOf(toolElement);\n    if (index !== -1 && index !== this.currentFocusIndex) {\n      this.currentFocusIndex = index;\n      this.updateTabIndexes();\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/z-tooltip.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-c8ceadeb.js';
-import { P as PopoverPosition } from './index-2a6324f8.js';
+import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
+import { P as PopoverPosition } from './index-106473a8.js';
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}";
 const ZTooltipStyle0 = stylesCss;
@@ -7,6 +7,7 @@ const ZTooltipStyle0 = stylesCss;
 const ZTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.openChange = createEvent(this, "openChange", 7);
         this.position = PopoverPosition.AUTO;
         this.dark = false;
         this.open = false;
@@ -17,7 +18,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'ab2c260f466a47e9f25154ece6a78197ff23d0fa', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '239e63a0bfececc52c9538df70d0eb7fe63a0060' })));
+        return (h("z-popover", { key: 'e8fdf1126d0759105386285c13cd4f8d8774567b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '07042a5a804e77bdf4de0233fc7f1311079a5ad5' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/esm/z-tooltip.entry.js.map

@@ -1 +1 @@
-{"file":"z-tooltip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,wjBAAwjB,CAAC;AAC3kB,uBAAe,SAAS;;MCeX,QAAQ;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,UAET,8DAAa,CACH,EACZ;KACH;;;;;;","names":[],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\n  --z-tooltip-theme--surface: var(--color-surface01);\n  --z-tooltip-theme--text: var(--color-default-text);\n  --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n  --z-tooltip-padding: var(--space-unit);\n}\n\nz-popover {\n  --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n  --z-popover-theme--text: var(--z-tooltip-theme--text);\n  --z-popover-padding: var(--z-tooltip-padding);\n  --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n\n:host([dark]) z-popover {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n}\n","import {Component, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-tooltip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,wjBAAwjB,CAAC;AAC3kB,uBAAe,SAAS;;MCeX,QAAQ;;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAYf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,SAAS,QACT,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAE3D,8DAAa,CACH,EACZ;KACH;;;;;;","names":[],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\n  --z-tooltip-theme--surface: var(--color-surface01);\n  --z-tooltip-theme--text: var(--color-default-text);\n  --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n  --z-tooltip-padding: var(--space-unit);\n}\n\nz-popover {\n  --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n  --z-popover-theme--text: var(--z-tooltip-theme--text);\n  --z-popover-padding: var(--z-tooltip-padding);\n  --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n\n:host([dark]) z-popover {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n}\n","import {Component, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n   * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n   */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n        onOpenChange={(event) => this.openChange.emit(event.detail)}\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/z-tr.entry.js

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-8a9f6d27.js';
+export { Z as z_tr } from './index-d003e5d7.js';
 import './index-c8ceadeb.js';
-import './utils-e66d94c3.js';
-import './index-2a6324f8.js';
+import './utils-1b64bcd9.js';
+import './index-106473a8.js';
 import './breakpoints-d148bfde.js';
-import './index-f20179ad.js';
-import './index-b64ced16.js';
+import './index-4845b32f.js';
+import './index-39a920c4.js';
 
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-tree-list.entry.js

@@ -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-2a6324f8.js';
+import { g as KeyboardCode } from './index-106473a8.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:\"\"}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:\"\";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}";
 const ZTreeListStyle0 = stylesCss;
@@ -100,7 +100,7 @@ const ZTreeList = class {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: '860eebd2ba1f46fb493bc07eb245596a9dc8be99', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6a5876f627d499e9c04464383463f97d5caa1272', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: 'f6165d141d1ae1f40876c63f72ea0d196960f519', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '77ebd44ff71d71dc52b6a32fbc13232d0b6f93be', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-visually-hidden.entry.js

@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: '85eaf1a304d4100796ce8fcccdeeb768387db00b' });
+        return h("slot", { key: 'e165e47bd9a2da0bb438ea4dccfbb08e6f02cc4b' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/beans/index.d.ts

@@ -423,3 +423,187 @@ export declare enum IconPosition {
     LEFT = "left",
     RIGHT = "right"
 }
+/** Map of color hex codes to their Italian and English names for the Color Picker Palette. */
+export declare const ColorPickerPalette: {
+    readonly "#FFFFFF00": {
+        readonly it: "Trasparente";
+        readonly en: "Transparent";
+    };
+    readonly "#FFFFFF": {
+        readonly it: "Bianco";
+        readonly en: "White";
+    };
+    readonly "#CCCCCC": {
+        readonly it: "Grigio";
+        readonly en: "Gray";
+    };
+    readonly "#7E7E7E": {
+        readonly it: "Grigio scuro 1";
+        readonly en: "Dark gray 1";
+    };
+    readonly "#333333": {
+        readonly it: "Grigio scuro 2";
+        readonly en: "Dark gray 2";
+    };
+    readonly "#FFCCCC": {
+        readonly it: "Rosso chiaro 1";
+        readonly en: "Light red 1";
+    };
+    readonly "#FF9999": {
+        readonly it: "Rosso chiaro 2";
+        readonly en: "Light red 2";
+    };
+    readonly "#FF3333": {
+        readonly it: "Rosso";
+        readonly en: "Red";
+    };
+    readonly "#CC0000": {
+        readonly it: "Rosso scuro 1";
+        readonly en: "Dark red 1";
+    };
+    readonly "#660000": {
+        readonly it: "Rosso scuro 2";
+        readonly en: "Dark red 2";
+    };
+    readonly "#FFE1CC": {
+        readonly it: "Arancione chiaro 1";
+        readonly en: "Light orange 1";
+    };
+    readonly "#FFC399": {
+        readonly it: "Arancione chiaro 2";
+        readonly en: "Light orange 2";
+    };
+    readonly "#FF8933": {
+        readonly it: "Arancione";
+        readonly en: "Orange";
+    };
+    readonly "#CC5500": {
+        readonly it: "Arancione scuro 1";
+        readonly en: "Dark orange 1";
+    };
+    readonly "#662B00": {
+        readonly it: "Arancione scuro 2";
+        readonly en: "Dark orange 2";
+    };
+    readonly "#FFF7CC": {
+        readonly it: "Giallo chiaro 1";
+        readonly en: "Light yellow 1";
+    };
+    readonly "#FFEE99": {
+        readonly it: "Giallo chiaro 2";
+        readonly en: "Light yellow 2";
+    };
+    readonly "#FFDD33": {
+        readonly it: "Giallo";
+        readonly en: "Yellow";
+    };
+    readonly "#CCAA00": {
+        readonly it: "Giallo scuro 1";
+        readonly en: "Dark yellow 1";
+    };
+    readonly "#665600": {
+        readonly it: "Giallo scuro 2";
+        readonly en: "Dark yellow 2";
+    };
+    readonly "#DDFFCC": {
+        readonly it: "Verde chiaro 1";
+        readonly en: "Light green 1";
+    };
+    readonly "#BBFF99": {
+        readonly it: "Verde chiaro 2";
+        readonly en: "Light green 2";
+    };
+    readonly "#77FF33": {
+        readonly it: "Verde";
+        readonly en: "Green";
+    };
+    readonly "#44CC00": {
+        readonly it: "Verde scuro 1";
+        readonly en: "Dark green 1";
+    };
+    readonly "#226600": {
+        readonly it: "Verde scuro 2";
+        readonly en: "Dark green 2";
+    };
+    readonly "#CCFFE5": {
+        readonly it: "Verde acqua chiaro 1";
+        readonly en: "Light aquamarine 1";
+    };
+    readonly "#99FFCC": {
+        readonly it: "Verde acqua chiaro 2";
+        readonly en: "Light aquamarine 2";
+    };
+    readonly "#33FF99": {
+        readonly it: "Verde acqua";
+        readonly en: "Aquamarine";
+    };
+    readonly "#00CC66": {
+        readonly it: "Verde acqua scuro 1";
+        readonly en: "Dark aquamarine 1";
+    };
+    readonly "#006633": {
+        readonly it: "Verde acqua scuro 2";
+        readonly en: "Dark aquamarine 2";
+    };
+    readonly "#CCEEFF": {
+        readonly it: "Azzurro chiaro 1";
+        readonly en: "Light blue 1";
+    };
+    readonly "#99DDFF": {
+        readonly it: "Azzurro chiaro 2";
+        readonly en: "Light blue 2";
+    };
+    readonly "#33BBFF": {
+        readonly it: "Azzurro";
+        readonly en: "Blue";
+    };
+    readonly "#0088CC": {
+        readonly it: "Azzurro scuro 1";
+        readonly en: "Dark blue 1";
+    };
+    readonly "#004466": {
+        readonly it: "Azzurro scuro 2";
+        readonly en: "Dark blue 2";
+    };
+    readonly "#D4CCFF": {
+        readonly it: "Viola chiaro 1";
+        readonly en: "Light purple 1";
+    };
+    readonly "#AA99FF": {
+        readonly it: "Viola chiaro 2";
+        readonly en: "Light purple 2";
+    };
+    readonly "#5533FF": {
+        readonly it: "Viola";
+        readonly en: "Purple";
+    };
+    readonly "#2200CC": {
+        readonly it: "Viola scuro 1";
+        readonly en: "Dark purple 1";
+    };
+    readonly "#110066": {
+        readonly it: "Viola scuro 2";
+        readonly en: "Dark purple 2";
+    };
+    readonly "#FFCCFF": {
+        readonly it: "Rosa chiaro 1";
+        readonly en: "Light pink 1";
+    };
+    readonly "#FF99FF": {
+        readonly it: "Rosa chiaro 2";
+        readonly en: "Light pink 2";
+    };
+    readonly "#FF33FF": {
+        readonly it: "Rosa";
+        readonly en: "Pink";
+    };
+    readonly "#CC00CC": {
+        readonly it: "Rosa scuro 1";
+        readonly en: "Dark pink 1";
+    };
+    readonly "#660066": {
+        readonly it: "Rosa scuro 2";
+        readonly en: "Dark pink 2";
+    };
+};
+export type ColorPickerPalette = keyof typeof ColorPickerPalette;

package/dist/types/components/z-app-header/index.stories.d.ts

@@ -49,6 +49,14 @@ export declare const TopTitle: {
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
+export declare const TopTitleWithProductLogo: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
+};
 export declare const CustomMenuButton: {
     parameters: {
         controls: {
@@ -65,6 +73,14 @@ export declare const MenuWithTopTitle: {
     };
     render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
 };
+export declare const MenuWithTopTitleAndProductLogo: {
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+    render: (args: ZAppHeaderStoriesArgs) => TemplateResult<1>;
+};
 export declare const LongTitle: {
     parameters: {
         controls: {

package/dist/types/components/z-color-picker/index.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ColorPickerPalette } from "../../beans";
+/**
+ * Color picker component.
+ * This component allows the user to pick a color from a predefined set.
+ */
+export declare class ZColorPicker {
+    host: HTMLZColorPickerElement;
+    /**
+     * The selected color to highlight.
+     */
+    selectedColor: ColorPickerPalette;
+    /**
+     * The language for the aria labels inside the color picker.
+     */
+    lng: "it" | "en";
+    /**
+     * The aria-label for the color picker, e.g. "Select a background color for the label".
+     */
+    htmlAriaLabel: string;
+    /**
+     * Disables the transparent color option.
+     * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` ("dark gray 2").
+     */
+    disableTransparent: boolean;
+    /**
+     * Event emitted when a color is selected.
+     */
+    colorSelected: EventEmitter<ColorPickerPalette>;
+    /**
+     * The color keys arranged in row-major order for rendering and navigation.
+     */
+    private colorKeysByRow;
+    private _colorButtons;
+    private get colorButtons();
+    /**
+     * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).
+     * This ensures button indices in the DOM match their visual position in the grid.
+     */
+    private sortColorKeysByRow;
+    /** Move focus to the specified color button by index. */
+    private moveFocusTo;
+    validateTransparentSelection(): void;
+    emitColorSelected(): void;
+    /**
+     * Focuses the selected or first enabled color button and makes the container non-tabbable.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Compute next index in row-major grid according to keyboard direction.
+     */
+    private getNextIndexByKey;
+    /**
+     * Handle keyboard navigation within the color picker.
+     * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.
+     */
+    handleBlur(event: FocusEvent): void;
+    componentWillLoad(): void;
+    render(): HTMLZColorPickerElement;
+}