@zanichelli/albe-web-components 19.1.3 → 19.2.0

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

@@ -0,0 +1,318 @@
+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

@@ -0,0 +1 @@
+{"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-toolbar/styles.css

@@ -0,0 +1,46 @@
+:host,
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  padding: 0;
+  border: var(--border-size-small) solid var(--color-surface03);
+  background-color: var(--color-surface01);
+  border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */
+  box-shadow: var(--shadow-4);
+  gap: calc(var(--space-unit) / 2);
+}
+
+::slotted(z-divider) {
+  height: calc(var(--space-unit) * 4.5) !important;
+}
+
+@media (max-width: 767px) {
+  :host {
+    --z-toolbar-columns: 6;
+
+    position: relative;
+    display: grid;
+    max-width: 100%;
+
+    /* Draws a horizontal separator line between rows */
+    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);
+    gap: var(--border-size-small) calc(var(--space-unit) / 2);
+    grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));
+  }
+
+  ::slotted(z-divider) {
+    display: none !important;
+  }
+}

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: 'e8fdf1126d0759105386285c13cd4f8d8774567b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '07042a5a804e77bdf4de0233fc7f1311079a5ad5' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +138,24 @@ export class ZTooltip {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\nThis is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically."
+                },
+                "complexType": {
+                    "original": "{open: boolean}",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "openChange",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAKf,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;YAET,8DAAa,CACH,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n  tag: \"z-tooltip\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTooltip {\n  /** Tooltip position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /** Enable tooltip dark mode. */\n  @Prop({reflect: true})\n  dark = false;\n\n  /**\n   * The open state of the tooltip.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the tooltip.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Reflects `closable` prop of the popover.\n   * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n   */\n  @Prop()\n  closable = true;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  @Listen(\"openChange\")\n  onPopoverOpenChange(): void {\n    this.open = this.popoverEl.open;\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <z-popover\n        ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n        bindTo={this.bindTo}\n        open={this.open}\n        position={this.position}\n        closable={this.closable}\n        center\n        showArrow\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"]}
+{"version":3,"file":"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-visually-hidden/index.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class ZVisuallyHidden {
     render() {
-        return h("slot", { key: '85eaf1a304d4100796ce8fcccdeeb768387db00b' });
+        return h("slot", { key: 'e165e47bd9a2da0bb438ea4dccfbb08e6f02cc4b' });
     }
     static get is() { return "z-visually-hidden"; }
     static get encapsulation() { return "shadow"; }