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

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

@@ -0,0 +1,437 @@
+import { html } from "lit";
+import "../z-divider/index";
+import "../z-tool/index";
+import "./index";
+const StoryMeta = {
+    title: "ZToolbar",
+    component: "z-toolbar",
+    parameters: {
+        docs: {
+            description: {
+                component: [
+                    "The `z-toolbar` component implements the WCAG toolbar pattern with roving tabindex keyboard navigation.",
+                    "",
+                    "### 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.',
+                    "",
+                    "### 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.",
+                ].join("\n"),
+            },
+        },
+    },
+    args: {
+        htmlAriaLabel: "Toolbar principale",
+    },
+    decorators: [
+        (story) => html `<div
+        style="display: flex; justify-content: center; align-items: center; min-height: 100px;"
+        @click=${(e) => {
+            const tool = e.target.closest("z-tool");
+            if (tool && !tool.disabled && !tool.querySelector("z-toolbar")) {
+                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 `
+    <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 200px; padding-top: 20px;">
+      <z-toolbar html-aria-label=${args.htmlAriaLabel}>
+        <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="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>
+    </div>
+  `,
+};
+export const ProgrammaticSubmenuClosure = {
+    render: (args) => html `
+    <div
+      style="display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;"
+    >
+      <z-toolbar
+        id="toolbar-close-demo"
+        html-aria-label=${args.htmlAriaLabel}
+      >
+        <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-toolbar>
+        </z-tool>
+        <z-tool
+          icon="download"
+          tooltip="Scarica"
+        ></z-tool>
+        <z-tool
+          icon="upload"
+          tooltip="Carica"
+        ></z-tool>
+        <z-divider orientation="vertical"></z-divider>
+        <z-tool
+          icon="copy"
+          tooltip="Copia"
+        >
+          <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-toolbar>
+        </z-tool>
+        <z-tool
+          icon="gear"
+          tooltip="Impostazioni 2"
+        ></z-tool>
+        <z-tool
+          icon="download"
+          tooltip="Scarica 2"
+        ></z-tool>
+      </z-toolbar>
+      <button
+        type="button"
+        onclick="this.parentElement.querySelector('z-toolbar').closeSubmenus()"
+      >
+        call closeSubmenus()
+      </button>
+    </div>
+  `,
+};
+export const ProgrammaticActivation = {
+    render: (args) => html `
+    <div
+      style="display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;"
+    >
+      <z-toolbar html-aria-label=${args.htmlAriaLabel}>
+        <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-toolbar>
+        </z-tool>
+        <z-tool
+          icon="download"
+          tooltip="Scarica"
+        ></z-tool>
+        <z-tool
+          icon="upload"
+          tooltip="Carica"
+        ></z-tool>
+        <z-divider orientation="vertical"></z-divider>
+        <z-tool
+          icon="copy"
+          tooltip="Copia"
+        ></z-tool>
+        <z-tool
+          icon="gear"
+          tooltip="Impostazioni 2"
+        ></z-tool>
+        <z-tool
+          icon="download"
+          tooltip="Scarica 2"
+        ></z-tool>
+      </z-toolbar>
+      <div style="display: flex; gap: 8px; margin-top:50px;">
+        <button
+          type="button"
+          onclick="var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[0].open = !tools[0].open;"
+        >
+          toggle 1st tool (submenu)
+        </button>
+        <button
+          type="button"
+          onclick="var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[3].active = !tools[3].active;"
+        >
+          toggle 4th tool
+        </button>
+      </div>
+    </div>
+  `,
+};
+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 = {
+    parameters: {
+        viewport: {
+            defaultViewport: "mobile",
+        },
+    },
+    render: (args) => html `
+    <style>
+      .multiline-container {
+        --z-toolbar-columns: 4;
+      }
+      .inner-different-columns {
+        --z-toolbar-columns: 2;
+      }
+    </style>
+    <div
+      style="display: flex; justify-content: center; align-items: flex-start; min-height: 300px; padding-top: 150px;"
+    >
+      <z-toolbar
+        class="multiline-container"
+        html-aria-label=${args.htmlAriaLabel}
+      >
+        <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="copy"
+          tooltip="Copia"
+        >
+          <z-toolbar
+            class="inner-different-columns"
+            html-aria-label="Sotto-toolbar copia"
+          >
+            <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="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>
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZToolbar\",\n  component: \"z-toolbar\",\n  parameters: {\n    docs: {\n      description: {\n        component: [\n          \"The `z-toolbar` component implements the WCAG toolbar pattern with roving tabindex keyboard navigation.\",\n          \"\",\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          \"\",\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          \"\",\n          \"### 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        ].join(\"\\n\"),\n      },\n    },\n  },\n  args: {\n    htmlAriaLabel: \"Toolbar principale\",\n  },\n  decorators: [\n    (story) =>\n      html`<div\n        style=\"display: flex; justify-content: center; align-items: center; min-height: 100px;\"\n        @click=${(e: Event) => {\n          const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n          if (tool && !tool.disabled && !tool.querySelector(\"z-toolbar\")) {\n            tool.active = !tool.active;\n          }\n        }}\n      >\n        ${story()}\n      </div>`,\n  ],\n} satisfies Meta<ZToolbar>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbar>;\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    <div style=\"display: flex; justify-content: center; align-items: flex-start; min-height: 200px; padding-top: 20px;\">\n      <z-toolbar html-aria-label=${args.htmlAriaLabel}>\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=\"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    </div>\n  `,\n} satisfies Story;\n\nexport const ProgrammaticSubmenuClosure = {\n  render: (args) => html`\n    <div\n      style=\"display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;\"\n    >\n      <z-toolbar\n        id=\"toolbar-close-demo\"\n        html-aria-label=${args.htmlAriaLabel}\n      >\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-toolbar>\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-divider orientation=\"vertical\"></z-divider>\n        <z-tool\n          icon=\"copy\"\n          tooltip=\"Copia\"\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-toolbar>\n        </z-tool>\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-toolbar>\n      <button\n        type=\"button\"\n        onclick=\"this.parentElement.querySelector('z-toolbar').closeSubmenus()\"\n      >\n        call closeSubmenus()\n      </button>\n    </div>\n  `,\n} satisfies Story;\n\nexport const ProgrammaticActivation = {\n  render: (args) => html`\n    <div\n      style=\"display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;\"\n    >\n      <z-toolbar html-aria-label=${args.htmlAriaLabel}>\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-toolbar>\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-divider orientation=\"vertical\"></z-divider>\n        <z-tool\n          icon=\"copy\"\n          tooltip=\"Copia\"\n        ></z-tool>\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-toolbar>\n      <div style=\"display: flex; gap: 8px; margin-top:50px;\">\n        <button\n          type=\"button\"\n          onclick=\"var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[0].open = !tools[0].open;\"\n        >\n          toggle 1st tool (submenu)\n        </button>\n        <button\n          type=\"button\"\n          onclick=\"var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[3].active = !tools[3].active;\"\n        >\n          toggle 4th tool\n        </button>\n      </div>\n    </div>\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  parameters: {\n    viewport: {\n      defaultViewport: \"mobile\",\n    },\n  },\n  render: (args) => html`\n    <style>\n      .multiline-container {\n        --z-toolbar-columns: 4;\n      }\n      .inner-different-columns {\n        --z-toolbar-columns: 2;\n      }\n    </style>\n    <div\n      style=\"display: flex; justify-content: center; align-items: flex-start; min-height: 300px; padding-top: 150px;\"\n    >\n      <z-toolbar\n        class=\"multiline-container\"\n        html-aria-label=${args.htmlAriaLabel}\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=\"copy\"\n          tooltip=\"Copia\"\n        >\n          <z-toolbar\n            class=\"inner-different-columns\"\n            html-aria-label=\"Sotto-toolbar copia\"\n          >\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=\"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    </div>\n  `,\n} satisfies Story;\n"]}

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

@@ -0,0 +1,55 @@
+: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(
+        to bottom,
+        transparent 0,
+        transparent calc(var(--space-unit) * 5.5),
+        var(--color-surface03) calc(var(--space-unit) * 5.5),
+        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)
+      )
+      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);
+
+    /* Overrides z-tool submenu positioning */
+    --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);
+  }
+}

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

@@ -20,7 +20,7 @@ export class ZTooltip {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'ab2c260f466a47e9f25154ece6a78197ff23d0fa', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '239e63a0bfececc52c9538df70d0eb7fe63a0060' })));
+        return (h("z-popover", { key: 'fe8da17a58d70db3756fb35f8230d95b4546ee8a', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'cc8f284849ce1a08a6fdbe2b521006babd87de24' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -33,7 +33,7 @@ export class ZMyzCardComponent {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: '81d1355f5ad97b198aafb1e1c445767ff2936b3c', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'c3c4eab6b92d210be789058e26a6e20eef4031d9' })));
+        return (h("div", { key: '7adb7b75ea965adc868514cf96d3098522d6b4bb', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'b1a3947eee9d39c8677e3e37b9f5a9da6887e7a1' })));
     }
     static get is() { return "z-myz-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -46,7 +46,7 @@ export class ZMyzCardAlert {
         }
     }
     render() {
-        return (h("div", { key: '73de41fcf16d7def773d63fb87b1d3a39e0619cf', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8ed39f9dea3fc6fc2575e8e731a433ed3b5eb3e6', type: this.getAlertType() }, h("div", { key: 'efb81456a561b50027667a7aa58583b353f84a07', class: "relative-container" }, h("z-icon", { key: '4e6f621da2fa1d95422e4ad734836403b554a9b9', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'f73f48f20ec198e2ae08c212f9647436fdddcd3d', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'abbbc3d619829044615657d29f6af4849f9ff27f', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '78631a84365b1c5c436dde0fd52b2c2866deebfe', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8e54a3f758e17f6fff72efdd994c00a237965153', type: this.getAlertType() }, h("div", { key: '17029eac681c851ce079a4471b229f105ac018ad', class: "relative-container" }, h("z-icon", { key: 'bbbe8c42c16d3571e5acdd56d3c2332a2eb36c18', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '7ca5d395e3631b20f50b9cd62724a56721f3ec77', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'ac7627ad12844fa386e550d48ac0267579e3a2e0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardBody {
     render() {
-        return (h("div", { key: 'fa79fd3dd81f58ff58a1bc673d1d7b78e0bb8c84' }, h("slot", { key: '6d7442c02f0745bead9ec4ace4ea071ee31b469a', name: "alert" }), h("slot", { key: '59354a946c976a2bdf15ba4e66a99ec89ab14aaa', name: "cover" })));
+        return (h("div", { key: '0d02c2eac0ea628074ca649483b983e9c32673b7' }, h("slot", { key: '18354bf9d35e688c4ec5d6be8fe4e961dd5152e6', name: "alert" }), h("slot", { key: 'e81ab31f9de5bcbfb71b01e4a3578ec990a6cee2', name: "cover" })));
     }
     static get is() { return "z-myz-card-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.js

@@ -10,7 +10,7 @@ export class ZMyzCardCover {
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: 'bfd67f7bb591b7058de89b5d551edce98b656248', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: '8e57d894119bd3c99b76a26b87f31856670aabec', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
     static get is() { return "z-myz-card-cover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js

@@ -21,7 +21,7 @@ export class ZMyzCardDictionary {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: 'a0474433057659bcb67ef2b797a6047f90bd5440' }, h("z-myz-card", { key: 'efa1f2c8832fd2cc1ea057840059be67a16e3fdd' }, h("z-myz-card-header", { key: '38eef5801a486eb0d4b024fb7a050c76ad8af298', titolo: this.name }), h("div", { key: '415afa8d0500dbd40c5075e0cb46219656234d99', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '4b6a60e5e0f601204c6a44a61eae4150958176cd', class: "front" }, h("z-myz-card-body", { key: 'd1a4b3b1427fb158876b4c16673bc00b931cccb5' }, h("z-myz-card-cover", { key: 'f665c202781a4524654428400f31382a8f74b890', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '40c8d21689a0aec3f2f195aa6128db28331be614', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '58d51c4badd5807b9e918eb31e0194d3191b7c10', class: "back" }, h("slot", { key: '1e44e28b5a96e398e9c14234933aa54ad361fa1f', name: "info" }))), h("slot", { key: '796b2270fc63bd5f25905c5f823d05c7237d18da' }))));
+        return (h("div", { key: '4a22e906f15a897300c47195338a4ac7a8d097e0' }, h("z-myz-card", { key: '10ed7010f036216a498600fd7203ffb12c9dcdbe' }, h("z-myz-card-header", { key: 'df5a2bacb28913152f3f26172c6de9ea284722b1', titolo: this.name }), h("div", { key: 'df91b83426145ccf632233e2c0443e4f48c8b435', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'dfc0904493c116f39fd773fa93bac35eb8291c56', class: "front" }, h("z-myz-card-body", { key: '92c03400d1bafe40b1832cc5385d234acdcb589d' }, h("z-myz-card-cover", { key: 'de77df38946fa1dfcea760e46c371474bc034515', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'c01d012aab0f5fe885482b3cc56614f1944faa95', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '8ce8e9790fa052fc7fcbd82063b77bbce10e2eb4', class: "back" }, h("slot", { key: '8f8136511b5e5e297d09e40f244d77df22e90dfb', name: "info" }))), h("slot", { key: 'bb52dcbe9f214bb84159a0d271d16a35978b82ac' }))));
     }
     static get is() { return "z-myz-card-dictionary"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js

@@ -59,7 +59,7 @@ export class ZMyzCardFooter {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '7b0479b93d61f8d182ad5269333630361c652797', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '59324b2757ba2f9332ea06bdfb11a85732466ec3', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '3f1c486e9a8e7f6db48f6a5cd8eda7f8e052bcf0', class: "toggle" }, h("slot", { key: 'a4f3634cf6be3d79a8453f1529928cecb3babfef', name: "toggle" })), this.titolo && h("p", { key: '933b6baf1071591e1335396e66e9080ff165866e', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '834e49c6d7c0ae61ff5822649f3c67001c645d23', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '584ea59693ce6c16a54493c16ea050ea01a3be3c' }, h("p", { key: 'e2fec0db112fe8ef05d8673f0a1e79f24a57f302', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '2d6a3fbf5689c100fbed7333ad8a357e26d54970', title: this.getTitleAuthors() }, h("span", { key: 'e67cfd15c8103539a836db83d2b4d02f4c8aaf93', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'baf170aabdb3814b6d594a55e1e5d13757d31df9', class: "year-isbn" }, h("span", { key: '177324ca661350ebfa145715fc52ec58199e61fc', class: "isbn" }, h("span", { key: 'a78a8007d945837cc78d6df7a6ab2b91ad5f74fd' }, h("span", { key: '64173a3d213eb147b18bc801719b7e9c481c5a04', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'e7c65aff9800a923085af1c793a3127423490493', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'c8d251da5c5f4dc121295415a14ccdf66f2f77a0', name: "list" })))), this.customContent && h("slot", { key: '659c4589702dd06ea81a9041c6e14a724992618b', name: "content" })));
+        return (h("div", { key: '83e5307ed8967021822985e89efa8558d0018e72', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: 'cf70e9a043cb396ae4aabc3f8e01d1dcfa3d5665', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'd6bdb1b37ad753489715fafdc5304de27bf85edc', class: "toggle" }, h("slot", { key: 'b35d85cf87e3cd59d9989c1c7d4d7139fbc4d549', name: "toggle" })), this.titolo && h("p", { key: '36ad25e514b88f22927ee74d4a0a81ccfe52cc62', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '56c2b85852b762e305a69a7f977f2a8fb7ec12a3', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '1cbc7add9f6238292fc9ea7567a51ccfc62b46c7' }, h("p", { key: 'c0404f81e382330d6e56320f02aceee17e085926', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '0ec1e3a90d09bc379b34269b276da18e3a4f9388', title: this.getTitleAuthors() }, h("span", { key: '8d65743c8185c0ee4eb3c071f535eb5cda8dabab', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '744e7e705826acfc3f2a9f9305250a0ecb293274', class: "year-isbn" }, h("span", { key: '9d29d231ed9186ffeb7376cf947613a581b626da', class: "isbn" }, h("span", { key: 'b3f8863a8d5e21438dfcaef4394c2f92ae513913' }, h("span", { key: 'b88062286041d060510ff4d17362a2f29485d15f', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'ded3e83f86629e34067e1dd316e54427b65cac6f', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'a5239567c931b5b880eef53a09e934dd8e7b65de', name: "list" })))), this.customContent && h("slot", { key: '42670c82172f6f86102f0d51209e2297cdf2c338', name: "content" })));
     }
     static get is() { return "z-myz-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardFooterSections {
     render() {
-        return (h("div", { key: '8752f5693a9cd8561849f630067c1de37e4756bd' }, h("footer", { key: '081a20bcf923efe3b769e4e8d1f5b2199a8d8b81' }, h("div", { key: '72bfc00be9c66460dbcace344f6c0e9f8cd8e9b9', class: "top" }, h("slot", { key: '38eda715a4be3c715bdf4eb75c4332dd8d65e39b', name: "top" })), h("div", { key: '0f29a8ecb2233df5ad28ab834bed3056e4e4c1e5', class: "bottom" }, h("slot", { key: '48aab990a4c8444c625ae8ac14f06f460c4abdae', name: "bottom" })))));
+        return (h("div", { key: '4376492df8f4ac40ddb747fbb84702d7306a087d' }, h("footer", { key: '65ad57d32ecfa342c12900d2341c120fb2b13287' }, h("div", { key: 'a76dc6bd6b6e0702a0290f19226a5545993b8d87', class: "top" }, h("slot", { key: 'bce482d729d4f3d3e74eee129994e7d4593e6c8e', name: "top" })), h("div", { key: '8e440e41d186ffc5673bf0dcf0dc99fff504c043', class: "bottom" }, h("slot", { key: '8b685dd25a9049c960aa2272ced67556a3490654', name: "bottom" })))));
     }
     static get is() { return "z-myz-card-footer-sections"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js

@@ -30,7 +30,7 @@ export class ZMyzCardHeader {
         };
     }
     render() {
-        return (h("header", { key: '4ce589cb97427a439ffa4e91b5cd016f78d8a286', class: this.retrieveClass() }, h("slot", { key: '1c0b4cdec3f5094fe454f6fecef8e1154d2974cf', name: "aria-heading" }), h("span", { key: '2bb144d85f04322e0bfa34326860a35b317d7651', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: 'e8b00795917307c9edd55a16f12363bd905f2411', name: "icon" })));
+        return (h("header", { key: '3441319103ffb2f4a1097b78233793b57f5cb601', class: this.retrieveClass() }, h("slot", { key: 'bade30d0e781d514d7280971c673091c6831f1a2', name: "aria-heading" }), h("span", { key: 'eee042b64a4aa2e01af89f0ebea2a93ef6df7c14', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: 'c94d1b4a500ab3efcb19cdf26652580d0d054a84', name: "icon" })));
     }
     static get is() { return "z-myz-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js

@@ -6,7 +6,7 @@ export class ZMyzCardIcon {
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: '511b34381c62707a1408a9769536d3d0ba3223bb', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: 'a935b5d22370a4e7a35a458a6c92ee0aa1a7918a' }, h("z-icon", { key: '91f7d3cb733dff820b3429d1efea2c790d739df2', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: '9635ccd0f31e2fdf3e23cb14093b5eba6849c398', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: 'de736d5eb1390564e2ffafb5a250594c8cf7a880' }, h("z-icon", { key: 'f93ea254dc71bf5ffae324ebab7bc467f511e403', name: this.icon, width: 16, height: 16 }))));
     }
     static get is() { return "z-myz-card-icon"; }
     static get encapsulation() { return "shadow"; }