@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

package/dist/collection/components/deprecated/z-menu-deprecated/index.spec.js

@@ -0,0 +1,120 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZMenuSectionDeprecated } from "../z-menu-section-deprecated";
+import { ZMenuDeprecated } from "./index";
+describe("Suite test ZMenu", () => {
+    it("Test render ZMenu label only", async () => {
+        const page = await newSpecPage({
+            components: [ZMenuDeprecated],
+            html: `<z-menu-deprecated role="menu">
+        <h3>Menu label</h3>
+      </z-menu-deprecated>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu-deprecated role="menu">
+        <mock:shadow-root>
+          <div class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+    </z-menu-deprecated>`);
+    });
+    it("Test render ZMenu with items", async () => {
+        const page = await newSpecPage({
+            components: [ZMenuDeprecated, ZMenuSectionDeprecated],
+            html: `<z-menu-deprecated role="menu">
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <a href="#" slot="item">Item 2</a>
+        <a href="#" slot="item">Item 3</a>
+      </z-menu-deprecated>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu-deprecated role="menu">
+        <mock:shadow-root>
+          <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </div>
+          </button>
+          <div class="content">
+            <div class="items" role="menu">
+              <slot name="item"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <a href="#" slot="item">Item 2</a>
+        <a href="#" slot="item">Item 3</a>
+    </z-menu-deprecated>`);
+    });
+    it("Test render ZMenu with submenu", async () => {
+        const page = await newSpecPage({
+            components: [ZMenuDeprecated, ZMenuSectionDeprecated],
+            html: `<z-menu-deprecated role="menu">
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <z-menu-section-deprecated slot="item">
+          <h3>Item 2</h2>
+          <a href="#" slot="item">Item 2.1</a>
+          <a href="#" slot="item">Item 2.2</a>
+        </z-menu-section>
+      </z-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-menu-deprecated role="menu">
+        <mock:shadow-root>
+          <button aria-expanded="false" aria-label="Apri menù" class="menu-label">
+            <div class="menu-label-content">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </div>
+          </button>
+          <div class="content">
+            <div class="items" role="menu">
+              <slot name="item"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <h3>Menu label</h3>
+        <a href="#" slot="item">Item 1</a>
+        <z-menu-section-deprecated role="menu" slot="item">
+          <mock:shadow-root>
+            <button aria-pressed="false" class="label">
+              <slot></slot>
+              <z-icon name="chevron-down"></z-icon>
+            </button>
+          </mock:shadow-root>
+          <h3>Item 2</h3>
+          <a href="#" slot="item">Item 2.1</a>
+          <a href="#" slot="item">Item 2.2</a>
+        </z-menu-section-deprecated>
+    </z-menu-deprecated>`);
+    });
+    it("Test ZMenu toggle events", async () => {
+        const page = await newSpecPage({
+            components: [ZMenuDeprecated],
+            html: `<z-menu-deprecated role="menu">
+        <div slot="item">item</div>
+      </z-menu-deprecated>`,
+        });
+        const menu = page.rootInstance;
+        const openedCallback = jest.fn();
+        page.doc.addEventListener("opened", openedCallback);
+        await page.waitForChanges();
+        // call `toggle` to open the menu
+        menu.toggle();
+        expect(openedCallback).toHaveBeenCalled();
+        const closedCallback = jest.fn();
+        page.doc.addEventListener("closed", closedCallback);
+        await page.waitForChanges();
+        // the menu is already open, this call will close it
+        menu.toggle();
+        expect(closedCallback).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/deprecated/z-menu-deprecated/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-menu-deprecated/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,sBAAsB,EAAC,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;yBAUT,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC;YACrD,IAAI,EAAE;;;;;2BAKe;SACtB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;yBAmBT,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC;YACrD,IAAI,EAAE;;;;;;;;gBAQI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4BT,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;2BAEe;SACtB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,iCAAiC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,oDAAoD;QACpD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZMenuSectionDeprecated} from \"../z-menu-section-deprecated\";\n\nimport {ZMenuDeprecated} from \"./index\";\n\ndescribe(\"Suite test ZMenu\", () => {\n  it(\"Test render ZMenu label only\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuDeprecated],\n      html: `<z-menu-deprecated role=\"menu\">\n        <h3>Menu label</h3>\n      </z-menu-deprecated>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-deprecated role=\"menu\">\n        <mock:shadow-root>\n          <div class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n    </z-menu-deprecated>`);\n  });\n\n  it(\"Test render ZMenu with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuDeprecated, ZMenuSectionDeprecated],\n      html: `<z-menu-deprecated role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n      </z-menu-deprecated>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-deprecated role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <a href=\"#\" slot=\"item\">Item 2</a>\n        <a href=\"#\" slot=\"item\">Item 3</a>\n    </z-menu-deprecated>`);\n  });\n\n  it(\"Test render ZMenu with submenu\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuDeprecated, ZMenuSectionDeprecated],\n      html: `<z-menu-deprecated role=\"menu\">\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section-deprecated slot=\"item\">\n          <h3>Item 2</h2>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section>\n      </z-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-menu-deprecated role=\"menu\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"Apri menù\" class=\"menu-label\">\n            <div class=\"menu-label-content\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </div>\n          </button>\n          <div class=\"content\">\n            <div class=\"items\" role=\"menu\">\n              <slot name=\"item\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <h3>Menu label</h3>\n        <a href=\"#\" slot=\"item\">Item 1</a>\n        <z-menu-section-deprecated role=\"menu\" slot=\"item\">\n          <mock:shadow-root>\n            <button aria-pressed=\"false\" class=\"label\">\n              <slot></slot>\n              <z-icon name=\"chevron-down\"></z-icon>\n            </button>\n          </mock:shadow-root>\n          <h3>Item 2</h3>\n          <a href=\"#\" slot=\"item\">Item 2.1</a>\n          <a href=\"#\" slot=\"item\">Item 2.2</a>\n        </z-menu-section-deprecated>\n    </z-menu-deprecated>`);\n  });\n\n  it(\"Test ZMenu toggle events\", async () => {\n    const page = await newSpecPage({\n      components: [ZMenuDeprecated],\n      html: `<z-menu-deprecated role=\"menu\">\n        <div slot=\"item\">item</div>\n      </z-menu-deprecated>`,\n    });\n    const menu = page.rootInstance;\n\n    const openedCallback = jest.fn();\n    page.doc.addEventListener(\"opened\", openedCallback);\n    await page.waitForChanges();\n    // call `toggle` to open the menu\n    menu.toggle();\n    expect(openedCallback).toHaveBeenCalled();\n\n    const closedCallback = jest.fn();\n    page.doc.addEventListener(\"closed\", closedCallback);\n    await page.waitForChanges();\n    // the menu is already open, this call will close it\n    menu.toggle();\n    expect(closedCallback).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/deprecated/z-menu-deprecated/index.stories.js

@@ -0,0 +1,129 @@
+import { html } from "lit";
+import "../z-menu-section-deprecated/index";
+import "./index";
+const StoryMeta = {
+    title: "Deprecated/ZMenuDeprecated",
+    component: "z-menu",
+    args: {
+        active: false,
+        floating: true,
+        verticalContext: false,
+    },
+};
+export default StoryMeta;
+export const FloatingContentLayout = {
+    render: (args) => html `
+    <z-menu-deprecated
+      .active=${args.active}
+      .floating=${args.floating}
+      .verticalContext=${args.verticalContext}
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated slot="item">
+        <h3>Item 3</h3>
+        <a
+          href=""
+          slot="item"
+          >Item 3.1</a
+        >
+        <a
+          href=""
+          slot="item"
+          >Item 3.2</a
+        >
+      </z-menu-section-deprecated>
+      <z-menu-section-deprecated slot="item">
+        <h3>Item 4</h3>
+        <a
+          href=""
+          slot="item"
+          >Item 4.1</a
+        >
+        <a
+          href=""
+          slot="item"
+          >Item 4.2</a
+        >
+      </z-menu-section-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+  `,
+};
+export const WithHeader = {
+    render: (args) => html `
+    <z-menu-deprecated
+      .active=${args.active}
+      .floating=${args.floating}
+      .verticalContext=${args.verticalContext}
+    >
+      <img
+        slot="header"
+        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
+      />
+      <h4 slot="header">Menu header</h4>
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated slot="item">
+        <h3>Item 3</h3>
+        <a
+          href=""
+          slot="item"
+          >Item 3.1</a
+        >
+        <a
+          href=""
+          slot="item"
+          >Item 3.2</a
+        >
+      </z-menu-section-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 4</a
+      >
+    </z-menu-deprecated>
+  `,
+};
+export const ActiveWithoutItems = {
+    parameters: {
+        controls: {
+            exclude: ["floating"],
+        },
+    },
+    render: (args) => html `
+    <z-menu-deprecated
+      .active=${true}
+      .verticalContext=${args.verticalContext}
+    >
+      <a
+        href="https://cataas.com/cat/gif"
+        target="_blank"
+        >Click me</a
+      >
+    </z-menu-deprecated>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-menu-deprecated/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,KAAK;KACvB;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6C1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC1C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,UAAU,CAAC;SACtB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI;yBACK,IAAI,CAAC,eAAe;;;;;;;;GAQ1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuDeprecated} from \".\";\nimport \"../z-menu-section-deprecated/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"Deprecated/ZMenuDeprecated\",\n  component: \"z-menu\",\n  args: {\n    active: false,\n    floating: true,\n    verticalContext: false,\n  },\n} satisfies Meta<ZMenuDeprecated>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuDeprecated>;\n\nexport const FloatingContentLayout = {\n  render: (args) => html`\n    <z-menu-deprecated\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section-deprecated slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.2</a\n        >\n      </z-menu-section-deprecated>\n      <z-menu-section-deprecated slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 4.2</a\n        >\n      </z-menu-section-deprecated>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu-deprecated>\n  `,\n} satisfies Story;\n\nexport const WithHeader = {\n  render: (args) => html`\n    <z-menu-deprecated\n      .active=${args.active}\n      .floating=${args.floating}\n      .verticalContext=${args.verticalContext}\n    >\n      <img\n        slot=\"header\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h4 slot=\"header\">Menu header</h4>\n      <h3>Menu label</h3>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 1</a\n      >\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 2</a\n      >\n      <z-menu-section-deprecated slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"item\"\n          >Item 3.2</a\n        >\n      </z-menu-section-deprecated>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 4</a\n      >\n    </z-menu-deprecated>\n  `,\n} satisfies Story;\n\nexport const ActiveWithoutItems = {\n  parameters: {\n    controls: {\n      exclude: [\"floating\"],\n    },\n  },\n  render: (args) => html`\n    <z-menu-deprecated\n      .active=${true}\n      .verticalContext=${args.verticalContext}\n    >\n      <a\n        href=\"https://cataas.com/cat/gif\"\n        target=\"_blank\"\n        >Click me</a\n      >\n    </z-menu-deprecated>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/deprecated/z-menu-deprecated/styles.css

@@ -0,0 +1,217 @@
+:host,
+::slotted(*),
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+
+  --z-menu-label-color: var(--color-default-text);
+}
+
+::slotted(a) {
+  text-decoration: none;
+}
+
+::slotted(*) {
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.menu-label {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  border-radius: 0;
+  color: inherit;
+  outline: none;
+  text-align: left;
+}
+
+button.menu-label {
+  cursor: pointer;
+}
+
+.menu-label:focus-within {
+  z-index: 1;
+  padding-right: calc(var(--space-unit) * 0.5);
+  padding-left: calc(var(--space-unit) * 0.5);
+  margin-right: calc(var(--space-unit) * -0.5);
+  margin-left: calc(var(--space-unit) * -0.5);
+  box-shadow: var(--shadow-focus-primary);
+}
+
+.menu-label .menu-label-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+:host(:is([active], [open])) .menu-label-content,
+.menu-label:focus-within .menu-label-content {
+  font-weight: var(--font-bd);
+}
+
+:host(:is([active], [open])) .menu-label-content ::slotted(*),
+.menu-label:focus-within .menu-label-content ::slotted(*) {
+  letter-spacing: normal;
+}
+
+:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {
+  box-shadow: none !important;
+}
+
+/* border */
+:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,
+.menu-label .menu-label-content:hover::after,
+.menu-label:focus-within .menu-label-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  content: "";
+  pointer-events: none;
+}
+
+:host([vertical-context]) .menu-label-content::after {
+  height: var(--border-size-small);
+  background-color: var(--color-surface03);
+}
+
+:host(:is([active], [open])) .menu-label .menu-label-content::after,
+.menu-label .menu-label-content:hover::after,
+.menu-label:focus-within .menu-label-content::after {
+  height: var(--border-size-large);
+  background-color: var(--color-secondary01);
+}
+
+/* Prevents layout shifts on font-weight changes.
+The trick is to put an hidden copy of the text already set to bold,
+so the needed space is correctly calculated before any hover/active state changes the
+font-weight of the real text.
+The hidden text has an height of 0px so it can expand the width without changing the height
+when placed below the real text using `flex-direction: column`. */
+::slotted([data-text])::after {
+  height: 0;
+  content: attr(data-text);
+  content: attr(data-text) / "";
+  font-weight: var(--font-bd);
+  letter-spacing: normal;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+@media speech {
+  ::slotted([data-text])::after {
+    display: none;
+  }
+}
+
+::slotted([data-text]) {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.menu-label .menu-label-content ::slotted(*) {
+  display: inline-flex;
+  width: 100%;
+  margin: 0;
+  appearance: none;
+  color: var(--z-menu-label-color);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-5);
+  font-weight: inherit;
+  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */
+  line-height: 1.2;
+  outline: none;
+}
+
+.menu-label .menu-label-content ::slotted(*),
+.menu-label .menu-label-content z-icon {
+  padding: var(--space-unit) 0;
+}
+
+.menu-label .menu-label-content z-icon {
+  margin-left: calc(var(--space-unit) * 1.5);
+  fill: currentcolor;
+}
+
+.content {
+  background: var(--color-surface01);
+}
+
+:host(:not([open])) .content {
+  display: none;
+}
+
+:host([floating]) .content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 375px;
+  min-width: 100%;
+  max-width: 100vw;
+  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);
+  box-shadow: var(--shadow-2);
+}
+
+:host(:not([floating])) .content {
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);
+}
+
+.header ::slotted(img[slot="header"]) {
+  width: calc(var(--space-unit) * 11.25);
+  height: auto;
+  object-fit: contain;
+}
+
+.header ::slotted([slot="header"]:not(:first-child)) {
+  margin: auto 0;
+  margin-left: calc(var(--space-unit) * 2.5);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-sb);
+  line-height: 1.5;
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: inherit;
+}
+
+.items > ::slotted([slot="item"]) {
+  width: 100%;
+  margin: 0;
+  font-size: var(--font-size-3);
+  line-height: 1.25;
+  outline: none;
+}
+
+.items > ::slotted([slot="item"]:focus:focus-visible) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+.items > ::slotted([slot="item"]:not(z-menu-section)) {
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  border-bottom: var(--border-size-small) solid var(--color-surface05);
+}
+
+.items > ::slotted([slot="item"]:hover),
+.items > ::slotted([slot="item"]:focus:focus-visible),
+.items > ::slotted([slot="item"]:active) {
+  border-color: var(--color-secondary01);
+  font-weight: var(--font-bd);
+}

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js

@@ -0,0 +1,131 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A component to create submenus inside the ZMenu.
+ * @slot - Label of the menu section.
+ * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
+ */
+export class ZMenuSectionDeprecated {
+    constructor() {
+        this.active = undefined;
+        this.open = undefined;
+        this.hasContent = undefined;
+    }
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+        this.open ? this.opened.emit() : this.closed.emit();
+    }
+    /** Close the list when a click is performed outside of this Element. */
+    handleClick(ev) {
+        if (!this.open || this.hostElement.contains(ev.target)) {
+            return;
+        }
+        this.open = false;
+        this.closed.emit();
+    }
+    /**
+     * Check if some content slot is set.
+     */
+    checkContent() {
+        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+    }
+    componentWillLoad() {
+        this.checkContent();
+    }
+    render() {
+        return (h(Host, { key: '9f5e6272fec856fc30b8f00632105cf2d41f53cc', role: "menu", open: this.open }, h("button", { key: '31fbf5069fe344a43e5835f14459300dcf3359ac', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '789bf049b23b099e4fb07f12a3fa5a80a221f833', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: 'ffc7213860bca2db3fc12d575aaf26a0c598caaa', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '14cc6b2bb5f80030df79598464af61c4e375293b', class: "items" }, h("slot", { key: '830b84cf4ce1028c7cfed3ec5051f206f742e66f', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+    }
+    static get is() { return "z-menu-section-deprecated"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active state"
+                },
+                "attribute": "active",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "hasContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The section has been opened."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The section has been closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-menu-section-deprecated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEpG;;;;GAIG;AAMH,MAAM,OAAO,sBAAsB;;;;;;IAqBzB,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACtD,CAAC;IAED,wEAAwE;IAExE,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClF,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;gBAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACxE;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,OAAO;gBAChB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}