npm - @zanichelli/albe-web-components - Versions diffs - 19.1.4-RC1 → 19.3.0-RC1 - Mend

@zanichelli/albe-web-components 19.1.4-RC1 → 19.3.0-RC1

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

Files changed (877) hide show

package/dist/cjs/z-tool.cjs.entry.js CHANGED Viewed

@@ -3,19 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-96af6326.js');
-const index$1 = require('./index-97a4c18d.js');
+const index$1 = require('./index-e30d0503.js');
+const utils = require('./utils-b1859d65.js');
+require('./breakpoints-8a1e87e0.js');
-const stylesCss = ":host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host([active]) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}@media (hover: hover){:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}.z-tool:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary01);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-popover-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));z-index:2;font-family:var(--font-family-sans)}@media (max-width: 767px){.z-tool-tooltip{display:none !important}}:host{position:var(--z-tool-host-position, relative)}.z-tool-submenu{position:var(--z-tool-submenu-position, absolute);z-index:1;top:var(--z-tool-submenu-top, calc(100% + 4px));bottom:var(--z-tool-submenu-bottom, auto);left:var(--z-tool-submenu-left, 50%);display:none;transform:var(--z-tool-submenu-transform, translateX(-50%))}.z-tool-submenu-open{display:block}";
+const stylesCss = ":host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}";
 const ZToolStyle0 = stylesCss;
+const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
+const ZToolStyle1 = typographyCss;
 const ZTool = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggleSubmenu = index.createEvent(this, "toggleSubmenu", 7);
-        this.handleTooltipOpen = () => {
-            //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus
-            //This control will be removed in future versions when nested tooltips will be supported
-            if (!this.tooltip || this.isNested) {
+        this.toggleTooltip = index.createEvent(this, "toggleTooltip", 7);
+        /** Indicates if the tool is nested inside another tool. */
+        this.isNested = false;
+        /**
+         * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.
+         */
+        this.handleTooltipOpen = (ev) => {
+            if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target)) {
                 return;
             }
             clearTimeout(this.hoverDelay);
@@ -23,23 +32,46 @@ const ZTool = class {
                 this.tooltipOpen = true;
             }, 1000);
         };
-        this.handleTooltipClose = () => {
-            if (!this.tooltip) {
+        /**
+         * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.
+         */
+        this.handleTooltipClose = (ev) => {
+            var _a;
+            if (!this.tooltip || ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest("z-tooltip")) === this.tooltipRef) {
                 return;
             }
             clearTimeout(this.hoverDelay);
             this.tooltipOpen = false;
         };
+        /**
+         * Handles click events on the tool's button element.
+         * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,
+         * or the first item if no active/selected item is found.
+         */
         this.handleClick = () => {
-            if (this.disabled) {
+            if (this.disabled || !this.hasSlottedContent) {
                 return;
             }
-            if (this.hasSlottedContent) {
-                this.open = !this.open;
-                if (this.open) {
-                    this.focusNestedToolbar();
+            this.open = !this.open;
+            if (this.open) {
+                const colorPicker = this.hostElement.querySelector(":scope > z-color-picker");
+                if (colorPicker) {
+                    colorPicker.setFocus();
+                    return;
                 }
+                // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.
+                const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)") || this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)"));
+                firstActiveOrEnabledNestedTool === null || firstActiveOrEnabledNestedTool === void 0 ? void 0 : firstActiveOrEnabledNestedTool.setFocus();
+            }
+        };
+        /**
+         * 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).
+         */
+        this.onTooltipOpenChange = (event) => {
+            if (event.target === this.tooltipRef) {
+                return;
             }
+            this.tooltipOpen = event.detail.open;
         };
         this.icon = undefined;
         this.tooltip = undefined;
@@ -48,57 +80,130 @@ const ZTool = class {
         this.active = false;
         this.disabled = false;
         this.open = false;
+        this.indicatorColor = undefined;
         this.tooltipOpen = false;
         this.hasSlottedContent = false;
-        this.isNested = false;
+        this.isMobile = false;
+        this.hasNestedOpenTools = false;
     }
     handleOpenChange() {
         this.toggleSubmenu.emit(this.open);
     }
-    focusNestedToolbar() {
-        requestAnimationFrame(() => {
-            var _a;
-            const nestedToolbar = this.hostElement.querySelector("z-toolbar");
-            if (nestedToolbar) {
-                const firstTool = nestedToolbar.querySelector("z-tool");
-                if (firstTool) {
-                    const button = (_a = firstTool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-                    if (button) {
-                        button.focus();
-                    }
+    handleTooltipOpenChange() {
+        this.toggleTooltip.emit(this.tooltipOpen);
+    }
+    /**
+     * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.
+     */
+    handleKeyDown(event) {
+        if (!this.open || this.hasNestedOpenTools) {
+            return;
+        }
+        switch (event.key) {
+            case index$1.KeyboardCode.ESC:
+                event.stopPropagation();
+                this.open = false;
+                this.setFocus();
+                break;
+            case index$1.KeyboardCode.TAB:
+                if (event.shiftKey && event.target.closest("z-tool:not(:scope)") === this.hostElement) {
+                    this.open = false;
                 }
-            }
-        });
+                break;
+        }
     }
-    checkIfNested() {
-        let parent = this.hostElement.parentElement;
-        while (parent) {
-            if (parent.tagName.toLowerCase() === "z-tool") {
-                return true;
-            }
-            parent = parent.parentElement;
+    /**
+     * Close the popover on clicks outside the component, only if there are no nested open tools.
+     * In that case any outside click should close the nested submenu(s) first.
+     */
+    onOutsideClick(event) {
+        const target = event.composedPath()[0];
+        if (!this.open || utils.containsElement(this.hostElement, target) || this.hasNestedOpenTools) {
+            return;
+        }
+        this.open = false;
+    }
+    onNestedToolToggle(ev) {
+        if (ev.target === this.hostElement) {
+            return;
+        }
+        if (ev.detail === true) {
+            this.hasNestedOpenTools = true;
+            return;
+        }
+        this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll("z-tool")).some((tool) => tool.open);
+    }
+    /**
+     * Handles the `colorSelected` event from a nested `z-color-picker` component.
+     * Updates the `indicatorColor` and closes the tool's popover.
+     */
+    handleColorSelected(event) {
+        if (!Array.from(this.hostElement.children).includes(event.target)) {
+            return;
         }
-        return false;
+        this.indicatorColor = event.detail;
+        this.open = false;
+        this.setFocus();
+    }
+    /**
+     * Close the submenu when focus moves outside the tool.
+     */
+    handleExternalFocusin(ev) {
+        const target = ev.target;
+        if (!utils.containsElement(this.hostElement, target)) {
+            this.open = false;
+        }
+    }
+    /** Focuses the tool's button element. */
+    async setFocus() {
+        if (this.disabled) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 50);
+    }
+    /** Sets the tab index of the tool's internal button element. */
+    async setTabIndex(value) {
+        if (!this.buttonRef) {
+            return;
+        }
+        this.buttonRef.tabIndex = this.disabled ? -1 : value;
+    }
+    /** Closes the tooltip. */
+    async closeTooltip() {
+        clearTimeout(this.hoverDelay);
+        this.tooltipOpen = false;
     }
     componentWillLoad() {
         this.hasSlottedContent = this.hostElement.children.length > 0;
-        this.isNested = this.checkIfNested();
+        this.isNested = !!this.hostElement.closest("z-tool:not(:scope)");
+        this.mainToolbar = this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");
+        this.hasNestedOpenTools = !!this.hostElement.querySelector("z-tool[open]");
+        this.mql = matchMedia("(max-width: 767px)");
+        this.onMobileViewChange = (e) => (this.isMobile = e.matches);
+        this.mql.addEventListener("change", this.onMobileViewChange);
+        this.isMobile = this.mql.matches;
     }
     disconnectedCallback() {
+        var _a;
         clearTimeout(this.hoverDelay);
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (index.h(index.Host, { key: '29475c2061b8031c6d742e0b67bdcaa657acf269', nested: this.isNested }, index.h("button", { key: '7b2c77c12e7d62a0560a8c71d8660e45927d4024', class: "z-tool", type: "button", "aria-pressed": this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '4c4b2d93bb5d8869cff58970f6c1a52ae82041e9', ref: (el) => (this.iconRef = el), name: this.icon })), this.tooltip && !this.isNested && (index.h("z-popover", { key: '87078924f19cbd8ec1efeaa460fad64d3d45701d', class: "z-tool-tooltip", bindTo: this.iconRef, open: this.tooltipOpen, position: this.tooltipPosition, showArrow: true, center: true, closable: false }, index.h("span", { key: 'a11623609058d4106f18ed8d523e32ee102afaa7', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("div", { key: 'c22cf9f4ffe622afc11be4e94722d5232df7dd58', class: {
-                "z-tool-submenu": true,
-                "z-tool-submenu-open": this.open,
-            } }, index.h("slot", { key: '0e789c315bbcdc50c6ffbb32d225be7f12b9cd59' })))));
+        return (index.h(index.Host, { key: '81b929ee3738e7533405c8ea47535d7fb52bfb92', class: { "z-tool-tooltip-open": this.tooltipOpen } }, index.h("button", { key: '1b68af441ac69dbdf805b823b852c093b944e586', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '580cf2210393974cb2300ea6e50018149f6ef123', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (index.h("z-tooltip", { key: '9b0e197d25135e1a0016fbbdca48751e8350be7b', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? index$1.PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, index.h("span", { key: 'd6580708f0b79853cc3644cb6ea61b64cbe73a21', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("z-popover", { key: '121b6662678738de67739beb733edfe94a6df3f6', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+            /* disable auto-close to prevent unwanted close behaviors on mobile,
+            when the bound element is the main toolbar */
+            closable: false, position: this.isMobile ? index$1.PopoverPosition.TOP : index$1.PopoverPosition.BOTTOM }, index.h("slot", { key: '6bb4815374940bd0ce6dc21bf38a1372454bf830' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "tooltipOpen": ["handleTooltipOpenChange"]
     }; }
 };
-ZTool.style = ZToolStyle0;
+ZTool.style = ZToolStyle0 + ZToolStyle1;
 exports.z_tool = ZTool;

package/dist/cjs/z-tool.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-tool.entry.cjs.js","mappings":"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","names":["PopoverPosition","h","Host"],"sources":["src/components/z-tool/styles.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 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([active]) .z-tool {\n box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n@media (hover: hover) {\n :host(:not([disabled])) .z-tool:hover {\n background-color: var(--color-primary03);\n }\n}\n\n:host([disabled]) .z-tool {\n color: var(--color-disabled01-icon);\n cursor: not-allowed;\n}\n\n.z-tool:focus-visible {\n box-shadow: inset 0 0 0 2px var(--color-primary01);\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-icon {\n fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n --z-popover-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n --z-popover-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n z-index: 2;\n font-family: var(--font-family-sans);\n}\n\n@media (max-width: 767px) {\n .z-tool-tooltip {\n display: none !important;\n }\n}\n\n:host {\n position: var(--z-tool-host-position, relative);\n}\n\n.z-tool-submenu {\n position: var(--z-tool-submenu-position, absolute);\n z-index: 1;\n top: var(--z-tool-submenu-top, calc(100% + 4px));\n bottom: var(--z-tool-submenu-bottom, auto);\n left: var(--z-tool-submenu-left, 50%);\n display: none;\n transform: var(--z-tool-submenu-transform, translateX(-50%));\n}\n\n.z-tool-submenu-open {\n display: block;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/*\n ZTool component.\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 styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTool {\n @Element() hostElement: HTMLZToolElement;\n\n /* Tool icon /\n @Prop()\n icon: string;\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 selected 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 @State()\n tooltipOpen = false;\n\n @State()\n hasSlottedContent = false;\n\n @State()\n isNested = false;\n\n /* Emitted when the open state changes. */\n @Event()\n toggleSubmenu: EventEmitter;\n\n private iconRef?: HTMLElement;\n\n private hoverDelay?: ReturnType<typeof setTimeout>;\n\n @Watch(\"open\")\n handleOpenChange(): void {\n this.toggleSubmenu.emit(this.open);\n }\n\n private handleTooltipOpen = (): void => {\n //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus\n //This control will be removed in future versions when nested tooltips will be supported\n if (!this.tooltip \|\| this.isNested) {\n return;\n }\n clearTimeout(this.hoverDelay);\n this.hoverDelay = setTimeout(() => {\n this.tooltipOpen = true;\n }, 1000);\n };\n\n private handleTooltipClose = (): void => {\n if (!this.tooltip) {\n return;\n }\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n };\n\n private handleClick = (): void => {\n if (this.disabled) {\n return;\n }\n\n if (this.hasSlottedContent) {\n this.open = !this.open;\n if (this.open) {\n this.focusNestedToolbar();\n }\n }\n };\n\n private focusNestedToolbar(): void {\n requestAnimationFrame(() => {\n const nestedToolbar = this.hostElement.querySelector(\"z-toolbar\");\n if (nestedToolbar) {\n const firstTool = nestedToolbar.querySelector(\"z-tool\");\n if (firstTool) {\n const button = firstTool.shadowRoot?.querySelector(\"button\");\n if (button) {\n button.focus();\n }\n }\n }\n });\n }\n\n private checkIfNested(): boolean {\n let parent = this.hostElement.parentElement;\n while (parent) {\n if (parent.tagName.toLowerCase() === \"z-tool\") {\n return true;\n }\n parent = parent.parentElement;\n }\n\n return false;\n }\n\n componentWillLoad(): void {\n this.hasSlottedContent = this.hostElement.children.length > 0;\n this.isNested = this.checkIfNested();\n }\n\n disconnectedCallback(): void {\n clearTimeout(this.hoverDelay);\n }\n\n render(): HTMLZToolElement {\n return (\n <Host nested={this.isNested}>\n <button\n class=\"z-tool\"\n type=\"button\"\n aria-pressed={this.active ? \"true\" : \"false\"}\n aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : 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 ></z-icon>\n </button>\n {this.tooltip && !this.isNested && (\n <z-popover\n class=\"z-tool-tooltip\"\n bindTo={this.iconRef}\n open={this.tooltipOpen}\n position={this.tooltipPosition}\n showArrow\n center\n closable={false}\n >\n <span class=\"body-4\">{this.tooltip}</span>\n </z-popover>\n )}\n {this.hasSlottedContent && (\n <div\n class={{\n \"z-tool-submenu\": true,\n \"z-tool-submenu-open\": this.open,\n }}\n >\n <slot></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-tool.entry.cjs.js","mappings":"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","names":["PopoverPosition","KeyboardCode","containsElement","h","Host"],"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/cjs/z-toolbar.cjs.entry.js CHANGED Viewed

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-96af6326.js');
-const index$1 = require('./index-97a4c18d.js');
+const index$1 = require('./index-e30d0503.js');
-const stylesCss = ":host,*{box-sizing:border-box}:host{display:inline-flex;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);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:8;position:relative;display:inline-grid;align-items:stretch;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);column-gap:calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), auto);row-gap:var(--border-size-small);--z-tool-host-position:static;--z-tool-submenu-top:auto;--z-tool-submenu-bottom:calc(100% + calc(var(--space-unit) / 2));--z-tool-submenu-left:0;--z-tool-submenu-transform:none}::slotted(z-divider){display:none !important}::slotted(z-tool){border-radius:var(--border-radius)}}";
+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 {
@@ -19,42 +19,40 @@ const ZToolbar = class {
     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 colBreakpoint = parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns") || "8");
-        colBreakpoint = this.toolItems.length <= colBreakpoint ? this.toolItems.length : colBreakpoint;
-        this.hostElement.style.setProperty("--z-toolbar-columns", colBreakpoint.toString());
+        // 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 all z-tool elements in the toolbar (not nested ones). */
+    /** 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) => {
-            var _a;
-            const button = (_a = tool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-            if (button) {
-                button.tabIndex = index === this.currentFocusIndex ? 0 : -1;
-            }
+            tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);
         });
     }
     focusToolAt(index, fallback = "next") {
-        var _a;
         const tool = this.toolItems[index];
-        if (tool) {
-            const button = (_a = tool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-            this.currentFocusIndex = index;
-            if (button.disabled || !button) {
-                if (fallback === "next") {
-                    this.focusNextTool();
-                }
-                else {
-                    this.focusPreviousTool();
-                }
-            }
-            else if (button) {
-                button.focus();
-                this.updateTabIndexes();
-            }
+        if (!tool) {
+            return;
+        }
+        this.currentFocusIndex = index;
+        if (!tool.disabled) {
+            tool.setFocus();
+            this.updateTabIndexes();
+            return;
+        }
+        if (fallback === "next") {
+            this.focusNextTool();
+        }
+        else {
+            this.focusPreviousTool();
         }
     }
     focusNextTool() {
@@ -65,40 +63,43 @@ const ZToolbar = class {
         const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;
         this.focusToolAt(prevIndex, "previous");
     }
-    focusParentTool(event) {
-        var _a;
-        const parentTool = this.hostElement.closest("z-tool");
-        if (parentTool) {
-            event.preventDefault();
-            event.stopPropagation();
-            parentTool.open = false;
-            const parentButton = (_a = parentTool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-            if (parentButton) {
-                parentButton.focus();
-            }
+    /**
+     * 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;
         }
-    }
-    /** Close all open submenus in the toolbar. */
-    async closeSubmenus() {
-        const tools = this.hostElement.querySelectorAll(":scope > z-tool");
-        tools.forEach((tool) => {
-            if (tool.open) {
+        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;
             }
         });
     }
-    closeSibilingSubmenusOnOpen(event) {
-        if (event.detail === true) {
-            const tools = this.hostElement.querySelectorAll(":scope > z-tool");
-            tools.forEach((tool) => {
-                if (tool !== event.target.closest("z-tool") && 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) {
-        this.collectToolItems();
         const target = event.target;
         const toolElement = target.closest("z-tool");
         if (!toolElement || !this.toolItems.includes(toolElement)) {
@@ -117,26 +118,23 @@ const ZToolbar = class {
                 event.preventDefault();
                 this.focusPreviousTool();
                 break;
-            case index$1.KeyboardCode.ESC:
-            case index$1.KeyboardCode.TAB:
-                this.focusParentTool(event);
-                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) {
-        // When focus enters the toolbar, update the current focus index
         const target = event.target;
         const toolElement = target.closest("z-tool");
-        if (toolElement && this.toolItems.includes(toolElement)) {
-            const index = this.toolItems.indexOf(toolElement);
-            if (index !== -1 && index !== this.currentFocusIndex) {
-                this.currentFocusIndex = index;
-                this.updateTabIndexes();
-            }
+        const index = this.toolItems.indexOf(toolElement);
+        if (index !== -1 && index !== this.currentFocusIndex) {
+            this.currentFocusIndex = index;
+            this.updateTabIndexes();
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b03b77a808c6e0c1724e6765210e83bad3a7c4dc', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: '448035bb2842a93ed4e0bb433d1e506007b93519', onSlotchange: () => {
+        return (index.h(index.Host, { key: 'eb195bd6bb7d19e7958492c96761572838e2a881', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: '6283d32e6e5568a890ff9c404d152800269cda99', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));