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

package/dist/collection/components/z-tool/index.stories.js

@@ -1,35 +1,43 @@
 import { html } from "lit";
 import { PopoverPosition } from "../../beans";
+import { ICONS } from "../../constants/iconset";
+import "../z-color-picker/index";
 import "./index";
 import "./index.stories.css";
 const StoryMeta = {
     title: "ZTool",
     component: "z-tool",
-    args: {
-        icon: "gear",
-        tooltip: "Impostazioni",
-        tooltipPosition: PopoverPosition.TOP,
-        htmlAriaLabel: "Impostazioni",
-        active: false,
-        disabled: false,
-    },
     argTypes: {
         tooltipPosition: {
             options: Object.values(PopoverPosition),
             control: { type: "select" },
         },
+        indicatorColor: {
+            control: "color",
+        },
+        icon: {
+            options: Object.keys(ICONS),
+            control: { type: "select" },
+        },
+    },
+    args: {
+        active: false,
+        disabled: false,
+        htmlAriaLabel: "Impostazioni",
+        icon: "gear",
+        indicatorColor: "",
+        tooltip: "Impostazioni",
+        tooltipPosition: PopoverPosition.TOP,
     },
 };
 export default StoryMeta;
 export const Default = {
-    args: {
-        tooltipPosition: PopoverPosition.RIGHT,
-    },
     render: (args) => html `<div class="tool-container">
       <z-tool
         icon=${args.icon}
         tooltip=${args.tooltip}
         tooltip-position=${args.tooltipPosition}
+        .indicatorColor=${args.indicatorColor}
         html-aria-label=${args.htmlAriaLabel}
         ?active=${args.active}
         ?disabled=${args.disabled}
@@ -39,13 +47,13 @@ export const Default = {
 export const Active = {
     args: {
         active: true,
-        tooltipPosition: PopoverPosition.RIGHT,
     },
     render: (args) => html `<div class="tool-container">
       <z-tool
         icon=${args.icon}
         tooltip=${args.tooltip}
         tooltip-position=${args.tooltipPosition}
+        .indicatorColor=${args.indicatorColor}
         html-aria-label=${args.htmlAriaLabel}
         ?active=${args.active}
         ?disabled=${args.disabled}
@@ -61,10 +69,79 @@ export const Disabled = {
         icon=${args.icon}
         tooltip=${args.tooltip}
         tooltip-position=${args.tooltipPosition}
+        .indicatorColor=${args.indicatorColor}
+        html-aria-label=${args.htmlAriaLabel}
+        ?active=${args.active}
+        ?disabled=${args.disabled}
+      ></z-tool>
+    </div>`,
+};
+export const WithToolbar = {
+    render: (args) => html `<div class="tool-container">
+      <z-tool
+        icon=${args.icon}
+        tooltip=${args.tooltip}
+        tooltip-position=${args.tooltipPosition}
+        .indicatorColor=${args.indicatorColor}
         html-aria-label=${args.htmlAriaLabel}
         ?active=${args.active}
         ?disabled=${args.disabled}
+      >
+        <z-toolbar html-aria-label=${args.htmlAriaLabel}>
+          <z-tool
+            icon="gear"
+            tooltip="Impostazioni"
+          ></z-tool>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+          <z-divider orientation="vertical"></z-divider>
+          <z-tool
+            icon="download"
+            tooltip="Scarica"
+          ></z-tool>
+          <z-tool
+            icon="upload"
+            tooltip="Carica"
+          ></z-tool>
+          <z-tool
+            icon="copy"
+            tooltip="Copia"
+          ></z-tool> </z-toolbar
       ></z-tool>
     </div>`,
 };
+export const ColorPicker = {
+    args: {
+        icon: "bg-color",
+        indicatorColor: "#ff0000",
+        tooltip: "Colore di sfondo",
+    },
+    parameters: {
+        docs: {
+            story: {
+                inline: false,
+                height: "300px",
+            },
+        },
+    },
+    render: (args) => html `<div class="tool-container">
+      <z-tool
+        icon=${args.icon}
+        tooltip=${args.tooltip}
+        tooltip-position=${args.tooltipPosition}
+        .indicatorColor=${args.indicatorColor}
+        html-aria-label=${args.htmlAriaLabel}
+        ?active=${args.active}
+        ?disabled=${args.disabled}
+      >
+        <z-color-picker></z-color-picker>
+      </z-tool>
+    </div>`,
+};
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-tool/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,cAAc;QACvB,eAAe,EAAE,eAAe,CAAC,GAAG;QACpC,aAAa,EAAE,cAAc;QAC7B,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;KACF;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,eAAe,EAAE,eAAe,CAAC,KAAK;KACvC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;eAEO,IAAI,CAAC,IAAI;kBACN,IAAI,CAAC,OAAO;2BACH,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,aAAa;kBAC1B,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;;WAEtB;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,eAAe,CAAC,KAAK;KACvC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;eAEO,IAAI,CAAC,IAAI;kBACN,IAAI,CAAC,OAAO;2BACH,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,aAAa;kBAC1B,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;;WAEtB;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;eAEO,IAAI,CAAC,IAAI;kBACN,IAAI,CAAC,OAAO;2BACH,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,aAAa;kBAC1B,IAAI,CAAC,MAAM;oBACT,IAAI,CAAC,QAAQ;;WAEtB;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTool} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZTool\",\n  component: \"z-tool\",\n  args: {\n    icon: \"gear\",\n    tooltip: \"Impostazioni\",\n    tooltipPosition: PopoverPosition.TOP,\n    htmlAriaLabel: \"Impostazioni\",\n    active: false,\n    disabled: false,\n  },\n  argTypes: {\n    tooltipPosition: {\n      options: Object.values(PopoverPosition),\n      control: {type: \"select\"},\n    },\n  },\n} satisfies Meta<ZTool>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTool>;\n\nexport const Default = {\n  args: {\n    tooltipPosition: PopoverPosition.RIGHT,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Active = {\n  args: {\n    active: true,\n    tooltipPosition: PopoverPosition.RIGHT,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTool} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"../z-color-picker/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZTool\",\n  component: \"z-tool\",\n  argTypes: {\n    tooltipPosition: {\n      options: Object.values(PopoverPosition),\n      control: {type: \"select\"},\n    },\n    indicatorColor: {\n      control: \"color\",\n    },\n    icon: {\n      options: Object.keys(ICONS),\n      control: {type: \"select\"},\n    },\n  },\n  args: {\n    active: false,\n    disabled: false,\n    htmlAriaLabel: \"Impostazioni\",\n    icon: \"gear\",\n    indicatorColor: \"\",\n    tooltip: \"Impostazioni\",\n    tooltipPosition: PopoverPosition.TOP,\n  },\n} satisfies Meta<ZTool>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTool>;\n\nexport const Default = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Active = {\n  args: {\n    active: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const WithToolbar = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n          <z-tool\n            icon=\"gear\"\n            tooltip=\"Impostazioni\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"download\"\n            tooltip=\"Scarica\"\n          ></z-tool>\n          <z-tool\n            icon=\"upload\"\n            tooltip=\"Carica\"\n          ></z-tool>\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool> </z-toolbar\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const ColorPicker = {\n  args: {\n    icon: \"bg-color\",\n    indicatorColor: \"#ff0000\",\n    tooltip: \"Colore di sfondo\",\n  },\n  parameters: {\n    docs: {\n      story: {\n        inline: false,\n        height: \"300px\",\n      },\n    },\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n    </div>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-tool/styles.css

@@ -7,6 +7,7 @@
   --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);
@@ -20,27 +21,28 @@
   cursor: pointer;
 }
 
-:host([active]) .z-tool {
+:host(:is([active], [open])) .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);
+  background: var(--color-primary03);
 }
 
 @media (hover: hover) {
+  :host(:hover),
+  :host(.z-tool-tooltip-open) {
+    /* ensure any open tooltip is shown over sibling elements */
+    z-index: 1;
+  }
+
   :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);
+.z-tool:focus:focus-visible {
+  background-color: var(--color-primary03);
   outline: none;
 }
 
@@ -52,40 +54,37 @@ z-icon {
   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-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-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;
 }
 
-@media (max-width: 767px) {
-  .z-tool-tooltip {
-    display: none !important;
-  }
-}
-
-:host {
-  position: var(--z-tool-host-position, relative);
+.z-tool-submenu {
+  z-index: 3;
+  border-radius: calc(var(--border-radius) + var(--border-size-small));
 }
 
-.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 ::slotted(z-color-picker) {
+  border: var(--border-size-small) solid var(--color-surface03);
+  border-radius: var(--border-radius);
 }
 
-.z-tool-submenu-open {
-  display: block;
+@media (max-width: 767px) and (hover: none) {
+  .z-tool-tooltip {
+    display: none !important;
+  }
 }

package/dist/collection/components/z-toolbar/index.js

@@ -1,10 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { KeyboardCode } from "../../beans";
 /**
- * ZToolbar component.
+ * 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.
  * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.
  * Tools can be visually grouped using `z-divider` elements as separators.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
+ *
+ * @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`.
  */
 export class ZToolbar {
     constructor() {
@@ -16,42 +18,40 @@ export class ZToolbar {
     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() {
@@ -62,40 +62,43 @@ export class ZToolbar {
         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)) {
@@ -114,26 +117,23 @@ export class ZToolbar {
                 event.preventDefault();
                 this.focusPreviousTool();
                 break;
-            case KeyboardCode.ESC:
-            case 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 (h(Host, { key: 'b03b77a808c6e0c1724e6765210e83bad3a7c4dc', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '448035bb2842a93ed4e0bb433d1e506007b93519', onSlotchange: () => {
+        return (h(Host, { key: 'eb195bd6bb7d19e7958492c96761572838e2a881', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '6283d32e6e5568a890ff9c404d152800269cda99', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));
@@ -176,36 +176,17 @@ export class ZToolbar {
             "currentFocusIndex": {}
         };
     }
-    static get methods() {
-        return {
-            "closeSubmenus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLZToolElement": {
-                            "location": "global",
-                            "id": "global::HTMLZToolElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Close all open submenus in the toolbar.",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "hostElement"; }
     static get listeners() {
         return [{
                 "name": "toggleSubmenu",
-                "method": "closeSibilingSubmenusOnOpen",
+                "method": "closeSiblingSubmenusOnOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "toggleTooltip",
+                "method": "closeSiblingTooltipsOnOpen",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/z-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * ZToolbar component.\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@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 colBreakpoint = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"8\");\n    colBreakpoint = this.toolItems.length <= colBreakpoint ? this.toolItems.length : colBreakpoint;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", colBreakpoint.toString());\n  }\n\n  /** Collect all 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  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      const button = tool.shadowRoot?.querySelector(\"button\");\n      if (button) {\n        button.tabIndex = index === this.currentFocusIndex ? 0 : -1;\n      }\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (tool) {\n      const button = tool.shadowRoot?.querySelector(\"button\");\n      this.currentFocusIndex = index;\n      if (button.disabled || !button) {\n        if (fallback === \"next\") {\n          this.focusNextTool();\n        } else {\n          this.focusPreviousTool();\n        }\n      } else if (button) {\n        button.focus();\n        this.updateTabIndexes();\n      }\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  private focusParentTool(event: KeyboardEvent): void {\n    const parentTool = this.hostElement.closest(\"z-tool\") as HTMLZToolElement;\n    if (parentTool) {\n      event.preventDefault();\n      event.stopPropagation();\n      parentTool.open = false;\n      const parentButton = parentTool.shadowRoot?.querySelector(\"button\");\n      if (parentButton) {\n        parentButton.focus();\n      }\n    }\n  }\n\n  /** Close all open submenus in the toolbar. */\n  @Method()\n  async closeSubmenus(): Promise<void> {\n    const tools = this.hostElement.querySelectorAll<HTMLZToolElement>(\":scope > z-tool\");\n    tools.forEach((tool) => {\n      if (tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  @Listen(\"toggleSubmenu\")\n  closeSibilingSubmenusOnOpen(event: CustomEvent): void {\n    if (event.detail === true) {\n      const tools = this.hostElement.querySelectorAll<HTMLZToolElement>(\":scope > z-tool\");\n      tools.forEach((tool) => {\n        if (tool !== (event.target as HTMLElement).closest(\"z-tool\") && tool.open) {\n          tool.open = false;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    this.collectToolItems();\n\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      case KeyboardCode.ESC:\n      case KeyboardCode.TAB:\n        this.focusParentTool(event);\n        break;\n    }\n  }\n\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    // When focus enters the toolbar, update the current focus index\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      const index = this.toolItems.indexOf(toolElement);\n      if (index !== -1 && index !== this.currentFocusIndex) {\n        this.currentFocusIndex = index;\n        this.updateTabIndexes();\n      }\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,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}