@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,147 +0,0 @@
-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",
-    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 = {
-    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-tool>
-    </div>`,
-};
-export const Active = {
-    args: {
-        active: true,
-    },
-    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-tool>
-    </div>`,
-};
-export const Disabled = {
-    args: {
-        disabled: true,
-    },
-    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-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 +0,0 @@
-{"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-toolbar/index.js.map

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,318 +0,0 @@
-import { html } from "lit";
-import "../z-button/index";
-import "../z-divider/index";
-import "../z-tool/index";
-import "./index";
-import "./index.stories.css";
-/**
- * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.
- * ### Active state
- * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.
- * ### Visual grouping with `z-divider`
- * Use `<z-divider orientation="vertical">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.
- * ### Mobile multiline layout with `--z-toolbar-columns`
- * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.
- */
-const StoryMeta = {
-    title: "ZToolbar",
-    component: "z-toolbar",
-    args: {
-        htmlAriaLabel: "Toolbar principale",
-    },
-    decorators: [
-        (story) => html `<div
-        class="toolbar-container"
-        @click=${(e) => {
-            const tool = e.target.closest("z-tool");
-            if (tool && !tool.disabled && !tool.children.length) {
-                tool.active = !tool.active;
-            }
-        }}
-      >
-        ${story()}
-      </div>`,
-    ],
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithDividers = {
-    render: (args) => html `
-    <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>
-  `,
-};
-export const WithNestedToolbar = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="bg-color"
-        tooltip="Scegli un colore"
-      >
-        <z-color-picker></z-color-picker>
-      </z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Apri sotto-toolbar"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <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="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="bg-color"
-            tooltip="Scegli un colore"
-          >
-            <z-color-picker></z-color-picker>
-          </z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="chevron-up"
-        tooltip="Su"
-      ></z-tool>
-      <z-tool
-        icon="chevron-up"
-        tooltip="Su"
-      ></z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <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="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <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="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithDisabledTool = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-        disabled
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithActiveTool = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-        active
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const MultilineMobile = {
-    args: {
-        "--z-toolbar-columns": "4",
-    },
-    parameters: {
-        viewport: {
-            defaultViewport: "mobile",
-        },
-    },
-    render: (args) => html `
-    <z-toolbar
-      class="multiline-container"
-      html-aria-label=${args.htmlAriaLabel}
-      style="--z-toolbar-columns: ${args["--z-toolbar-columns"]};"
-    >
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Aggiungi"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni 2"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica 2"
-      ></z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Aggiungi"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
-          <z-tool
-            icon="copy"
-            tooltip="Copia"
-          ></z-tool>
-          <z-tool
-            icon="edit"
-            tooltip="Modifica"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica 2"
-      ></z-tool>
-      <z-tool
-        icon="copy"
-        tooltip="Copia 2"
-      ></z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni 3"
-        disabled
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica 3"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;GAQG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,aAAa,EAAE,oBAAoB;KACpC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;iBAEO,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAA4B,CAAC;YACpF,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC7B,CAAC;QACH,CAAC;;UAEC,KAAK,EAAE;aACJ;KACV;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;GAchD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,qBAAqB,EAAE,GAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,eAAe,EAAE,QAAQ;SAC1B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGA,IAAI,CAAC,aAAa;oCACN,IAAI,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF5D;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZToolbarStoriesArgs = ZToolbar & CSSVarsArguments<\"--z-toolbar-columns\">;\n\n/**\n * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * ### Active state\n * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.\n * ### Visual grouping with `z-divider`\n * Use `<z-divider orientation=\"vertical\">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.\n * ### Mobile multiline layout with `--z-toolbar-columns`\n * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.\n */\nconst StoryMeta = {\n  title: \"ZToolbar\",\n  component: \"z-toolbar\",\n  args: {\n    htmlAriaLabel: \"Toolbar principale\",\n  },\n  decorators: [\n    (story) =>\n      html`<div\n        class=\"toolbar-container\"\n        @click=${(e: Event) => {\n          const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n          if (tool && !tool.disabled && !tool.children.length) {\n            tool.active = !tool.active;\n          }\n        }}\n      >\n        ${story()}\n      </div>`,\n  ],\n} satisfies Meta<ZToolbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbarStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\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=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDividers = {\n  render: (args) => html`\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>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithNestedToolbar = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"bg-color\"\n        tooltip=\"Scegli un colore\"\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Apri sotto-toolbar\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\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=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"bg-color\"\n            tooltip=\"Scegli un colore\"\n          >\n            <z-color-picker></z-color-picker>\n          </z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\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=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\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=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\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=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDisabledTool = {\n  render: (args) => html`\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=\"download\"\n        tooltip=\"Scarica\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithActiveTool = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n        active\n      ></z-tool>\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-toolbar>\n  `,\n} satisfies Story;\n\nexport const MultilineMobile = {\n  args: {\n    \"--z-toolbar-columns\": \"4\",\n  },\n  parameters: {\n    viewport: {\n      defaultViewport: \"mobile\",\n    },\n  },\n  render: (args) => html`\n    <z-toolbar\n      class=\"multiline-container\"\n      html-aria-label=${args.htmlAriaLabel}\n      style=\"--z-toolbar-columns: ${args[\"--z-toolbar-columns\"]};\"\n    >\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\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-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\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-toolbar>\n      </z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool>\n          <z-tool\n            icon=\"edit\"\n            tooltip=\"Modifica\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"copy\"\n        tooltip=\"Copia 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 3\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 3\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n"]}

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

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

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

@@ -1,123 +0,0 @@
-import { html } from "lit";
-import { PopoverPosition } from "../../beans";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-button/index";
-import "./index";
-import "./index.stories.css";
-/**
- * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`
- * On the following Story, the "position" prop can be set only for the original positions of the `z-tooltip` by design.
- */
-const StoryMeta = {
-    title: "ZTooltip",
-    component: "z-tooltip",
-    argTypes: {
-        "position": {
-            options: [
-                PopoverPosition.AUTO,
-                PopoverPosition.TOP,
-                PopoverPosition.BOTTOM,
-                PopoverPosition.LEFT,
-                PopoverPosition.RIGHT,
-                PopoverPosition.TOP_LEFT,
-                PopoverPosition.TOP_RIGHT,
-                PopoverPosition.BOTTOM_LEFT,
-                PopoverPosition.BOTTOM_RIGHT,
-            ],
-            control: {
-                type: "select",
-            },
-        },
-        "--z-tooltip-theme--surface": getColorTokenArgConfig(),
-    },
-    args: {
-        "dark": false,
-        "--z-tooltip-theme--surface": "var(--color-surface01)",
-        "position": PopoverPosition.LEFT,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <div class="tooltip-container">
-      <z-button
-        id="trigger"
-        icon="plus-filled"
-      ></z-button>
-      <z-tooltip
-        .position=${args.position}
-        .dark=${args.dark}
-        bind-to="#trigger"
-        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
-      >
-        <div class="container">
-          <z-button>Open</z-button>
-          <z-button>Save as</z-button>
-          <z-button>Share</z-button>
-        </div>
-      </z-tooltip>
-    </div>
-    <script>
-      document.querySelector("#trigger").addEventListener("click", () => {
-        if (document.querySelector("z-tooltip").open) {
-          document.querySelector("z-tooltip").open = false;
-        } else {
-          document.querySelector("z-tooltip").open = true;
-        }
-      });
-    </script>
-  `,
-};
-/**
- * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.
- * In the Story below, the tooltip is opened hovering the button.
- */
-export const AutocloseOff = {
-    render: (args) => html `
-    <div class="tooltip-container">
-      <z-button
-        id="info-button"
-        icon="arrow-clockwise-up-left"
-      ></z-button>
-      <z-tooltip
-        .position="${args.position}"
-        .dark="${args.dark}"
-        closable="false"
-        bind-to="#info-button"
-        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
-      >
-        <span class="tooltip-info-text">Clicca per fare girare la freccia</span>
-      </z-tooltip>
-    </div>
-    <script>
-      button = document.querySelector("#info-button");
-      tooltip = document.querySelector("z-tooltip");
-      button.addEventListener("mouseover", () => {
-        tooltip.open = true;
-      });
-      button.addEventListener("focusin", () => {
-        tooltip.open = true;
-      });
-      button.addEventListener("mouseout", () => {
-        tooltip.open = false;
-      });
-      button.addEventListener("focusout", () => {
-        tooltip.open = false;
-      });
-      button.onclick = () => {
-        switch (button.icon) {
-          case "arrow-clockwise-up-left":
-            button.icon = "arrow-clockwise-up-right";
-            break;
-          case "arrow-clockwise-up-right":
-            button.icon = "arrow-clockwise-down-right";
-            break;
-          case "arrow-clockwise-down-right":
-            button.icon = "arrow-clockwise-up-left";
-            break;
-        }
-      };
-    </script>
-  `,
-};
-//# sourceMappingURL=index.stories.js.map