@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSearchbar} from \"./index\";\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n  observe: jest.fn(),\n  unobserve: jest.fn(),\n  disconnect: jest.fn(),\n}));\n\ndescribe(\"Suite test ZSearchbar\", () => {\n  it(\"Simple searchbar\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\"></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\">\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar without search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\"></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar class=\"has-results\" htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\">\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n          </div>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar with search and results - no input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      ></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-submit has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar with search and results - with input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      ></z-searchbar>`,\n    });\n    page.rootInstance.searchString = \"item\";\n    page.rootInstance.showResults = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-submit has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n            <div class=\"results-wrapper\">\n              <div class=\"results\">\n                <z-list role=\"listbox\" id=\"list-my-id\">\n                  ${searchHelper()}\n                  ${resultsItems()}\n                </z-list>\n              </div>\n            </div>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar with search and limited results - with input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        results-count=\"1\"\n        show-search-button=\"true\"\n      ></z-searchbar>`,\n    });\n    page.rootInstance.searchString = \"item\";\n    page.rootInstance.showResults = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-submit has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        results-count=\"1\"\n        show-search-button=\"true\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n            <div class=\"results-wrapper\">\n              <div class=\"results\">\n                <z-list role=\"listbox\" id=\"list-my-id\">\n                  ${searchHelper()}\n                  <z-list-group divider-type=\"element\">\n                    <z-list-element\n                      id=\"list-item-my-id-0\"\n                      role=\"option\"\n                      tabindex=\"0\"\n                      dividerType=\"element\"\n                      clickable\n                    >\n                    <div class=\"list-element\">\n                      <span class=\"item ellipsis\">\n                        <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n                        <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n                      </span>\n                    </div>\n                    </z-list-element>\n                  </z-list-group>\n                  ${showAllResults()}\n                </z-list>\n              </div>\n            </div>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar with search and limited results (show all) - with input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      ></z-searchbar>`,\n    });\n    page.rootInstance.searchString = \"item\";\n    page.rootInstance.showResults = true;\n    page.rootInstance.currResultsCount = 0;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-submit has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='${JSON.stringify(getItems())}'\n        show-search-button=\"true\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n            <div class=\"results-wrapper\">\n              <div class=\"results\">\n                <z-list role=\"listbox\" id=\"list-my-id\">\n                  ${searchHelper()}\n                  ${resultsItems()}\n                </z-list>\n              </div>\n            </div>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar without search and no results - with input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        prevent-submit=\"true\"\n        results-items='[]'\n      ></z-searchbar>`,\n    });\n    page.rootInstance.searchString = \"item\";\n    page.rootInstance.showResults = true;\n    page.rootInstance.currResultsCount = 0;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        prevent-submit=\"true\"\n        results-items=\"[]\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n            <div class=\"results-wrapper\">\n              <div class=\"results\">\n                <span class=\"item item-no-results\">\n                  Non abbiamo trovato risultati per <b>item</b>\n                  <br /><br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </span>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Autocomplete searchbar with search and no results - with input search\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='[]'\n        show-search-button=\"true\"\n      ></z-searchbar>`,\n    });\n    page.rootInstance.searchString = \"item\";\n    page.rootInstance.showResults = true;\n    page.rootInstance.currResultsCount = 0;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-searchbar\n        class=\"has-submit has-results\"\n        htmlid=\"my-id\"\n        autocomplete=\"true\"\n        results-items='[]'\n        show-search-button=\"true\"\n      >\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n            <div class=\"results-wrapper\">\n              <div class=\"results\">\n                <z-list role=\"listbox\" id=\"list-my-id\">\n                  ${searchHelper(false)}\n                </z-list>\n              </div>\n            </div>\n          </div>\n          <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Simple searchbar change size\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" size=\"small\"></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" size=\"small\">\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"small\"></z-input>\n          </div>\n          <z-button size=\"small\" variant=\"primary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Simple searchbar change button variant\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\"></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\">\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n          </div>\n          <z-button size=\"big\" variant=\"secondary\">CERCA</z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n\n  it(\"Simple searchbar only icon button\", async () => {\n    const page = await newSpecPage({\n      components: [ZSearchbar],\n      html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\"></z-searchbar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\">\n        <mock:shadow-root>\n          <div class=\"input-container\">\n            <z-input size=\"big\"></z-input>\n          </div>\n          <z-button icon=\"search\" size=\"big\" variant=\"primary\"></z-button>\n        </mock:shadow-root>\n      </z-searchbar>\n    `);\n  });\n});\n\nconst getItems = () => [{label: \"item 1\", icon: \"download\"}, {label: \"item 2\"}, {label: \"item 3\"}];\n\nconst resultsItems = () => `\n  <z-list-group divider-type=\"element\">\n    <z-list-element\n      id=\"list-item-my-id-0\"\n      role=\"option\"\n      tabindex=\"0\"\n      dividerType=\"element\"\n      clickable\n    >\n    <div class=\"list-element\">\n      <span class=\"item ellipsis\">\n        <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n        <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n      </span>\n    </div>\n    </z-list-element>\n    <z-list-element\n      id=\"list-item-my-id-1\"\n      role=\"option\"\n      tabindex=\"0\"\n      dividerType=\"element\"\n      clickable\n    >\n    <div class=\"list-element\">\n      <span class=\"item ellipsis\">\n        <span class=\"item-label\" title=\"item 2\"><mark>item</mark> 2</span>\n      </span>\n    </div>\n    </z-list-element>\n    <z-list-element\n      id=\"list-item-my-id-2\"\n      role=\"option\"\n      tabindex=\"0\"\n      clickable\n    >\n    <div class=\"list-element\">\n      <span class=\"item ellipsis\">\n        <span class=\"item-label\" title=\"item 3\"><mark>item</mark> 3</span>\n      </span>\n    </div>\n    </z-list-element>\n  </z-list-group>`;\n\nconst searchHelper = (divider: boolean = true) => `\n  <z-list-element\n    role=\"option\"\n    tabindex=\"0\"\n    ${divider ? `dividerType=\"element\"` : ``}\n    id=\"list-item-my-id-search\"\n    clickable\n  >\n    <span class=\"item item-search\">\n      <z-icon class=\"search-icon\" name=\"left-magnifying-glass\"></z-icon>\n      <span class=\"item-label\">Cerca <mark>item</mark></span>\n    </span>\n  </z-list-element>\n`;\n\nconst showAllResults = () => `\n  <z-list-element\n    role=\"option\"\n    tabindex=\"0\"\n    id=\"list-item-my-id-show-all\"\n    clickable\n    color=\"color-primary01\"\n  >\n    <div class=\"item-show-all\">Vedi tutti i risultati</div>\n  </z-list-element>\n`;\n"]}

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

@@ -0,0 +1,198 @@
+import { html } from "lit";
+import { ButtonVariant, ControlSize } from "../../beans";
+import "./index";
+const StoryMeta = {
+    title: "ZSearchbar",
+    component: "z-searchbar",
+    argTypes: {
+        size: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(ControlSize),
+        },
+        variant: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(ButtonVariant),
+        },
+    },
+    args: {
+        "preventSubmit": false,
+        "showSearchButton": false,
+        "searchButtonIconOnly": false,
+        "autocomplete": false,
+        "autocompleteMinChars": 3,
+        "resultsCount": null,
+        "resultsEllipsis": true,
+        "searchHelperLabel": "Cerca {searchString}",
+        "resultsItems": [
+            {
+                label: "first item",
+            },
+            {
+                label: "second item",
+            },
+            {
+                label: "third item",
+            },
+            {
+                label: "fourth item",
+            },
+        ],
+        "sortResultsItems": false,
+        "htmlid": "myId",
+        "placeholder": "my placeholder",
+        "value": "",
+        "--z-searchbar-results-height": "",
+        "--z-searchbar-tag-text-color": "var(--color-primary03)",
+        "--z-searchbar-tag-bg": "var(--color-hover-primary)",
+        "size": ControlSize.BIG,
+        "variant": ButtonVariant.PRIMARY,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `
+    <z-searchbar
+      prevent-submit=${args.preventSubmit}
+      show-search-button=${args.showSearchButton}
+      search-button-icon-only=${args.searchButtonIconOnly}
+      autocomplete=${args.autocomplete}
+      autocomplete-min-chars=${args.autocompleteMinChars}
+      results-count=${args.resultsCount}
+      results-ellipsis=${args.resultsEllipsis}
+      search-helper-label=${args.searchHelperLabel}
+      results-items=${JSON.stringify(args.resultsItems)}
+      sort-results-items=${JSON.stringify(args.sortResultsItems)}
+      value=${args.value}
+      placeholder=${args.placeholder}
+      htmlid=${args.htmlid}
+      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}"
+      size=${args.size}
+      variant=${args.variant}
+    ></z-searchbar>
+  `,
+};
+export const SimpleSearch = {
+    parameters: {
+        controls: {
+            include: ["value", "placeholder", "htmlid", "size"],
+        },
+    },
+    args: {
+        htmlid: "myIdSimple",
+    },
+    render: (args) => html `
+    <z-searchbar
+      prevent-submit="false"
+      show-search-button=${args.showSearchButton}
+      search-button-icon-only=${args.searchButtonIconOnly}
+      autcomplete="false"
+      value=${args.value}
+      placeholder=${args.placeholder}
+      htmlid=${args.htmlid}
+      size=${args.size}
+    ></z-searchbar>
+  `,
+};
+export const Autocomplete = {
+    args: {
+        autocomplete: true,
+        htmlid: "myIdAutocomplete",
+        showSearchButton: false,
+        searchButtonIconOnly: false,
+    },
+    render: (args) => html `
+    <z-searchbar
+      prevent-submit=${args.preventSubmit}
+      show-search-button=${args.showSearchButton}
+      search-button-icon-only=${args.searchButtonIconOnly}
+      autocomplete=${args.autocomplete}
+      autocomplete-min-chars=${args.autocompleteMinChars}
+      results-count=${args.resultsCount}
+      results-ellipsis=${args.resultsEllipsis}
+      search-helper-label=${args.searchHelperLabel}
+      results-items=${JSON.stringify(args.resultsItems)}
+      sort-results-items=${JSON.stringify(args.sortResultsItems)}
+      value=${args.value}
+      placeholder=${args.placeholder}
+      htmlid=${args.htmlid}
+      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}"
+      size=${args.size}
+      variant=${args.variant}
+    ></z-searchbar>
+  `,
+};
+export const AutocompleteWithComplexItems = {
+    args: {
+        autocomplete: true,
+        htmlid: "myIdGroupedAutocomplete",
+        showSearchButton: false,
+        searchButtonIconOnly: false,
+        resultsItems: [
+            {
+                label: "first item",
+                icon: "download",
+                tag: {
+                    text: "Riservato all'insegnante",
+                    icon: "teacher",
+                },
+                category: "Category A",
+                subcategory: "Subcategory A1",
+            },
+            {
+                label: "second item",
+                icon: "collezioni",
+                category: "Category B",
+                subcategory: "Subcategory B1",
+            },
+            {
+                label: "third item",
+                icon: "dictonary",
+                category: "Category A",
+                subcategory: "Subcategory A2",
+            },
+            {
+                label: "fourth item",
+                icon: "exercises-online",
+                category: "Category A",
+                subcategory: "Subcategory A1",
+            },
+            {
+                label: "fifth item",
+                icon: "interactives-maps",
+                category: "Category A",
+                subcategory: "Subcategory A1",
+            },
+            {
+                label: "sixth item",
+                icon: "textual-analysis",
+                category: "Category B",
+                subcategory: "Subcategory B1",
+            },
+        ],
+    },
+    render: (args) => html `
+    <z-searchbar
+      prevent-submit=${args.preventSubmit}
+      show-search-button=${args.showSearchButton}
+      search-button-icon-only=${args.searchButtonIconOnly}
+      autocomplete=${args.autocomplete}
+      autocomplete-min-chars=${args.autocompleteMinChars}
+      results-count=${args.resultsCount}
+      results-ellipsis=${args.resultsEllipsis}
+      search-helper-label=${args.searchHelperLabel}
+      results-items=${JSON.stringify(args.resultsItems)}
+      sort-results-items=${JSON.stringify(args.sortResultsItems)}
+      value=${args.value}
+      placeholder=${args.placeholder}
+      htmlid=${args.htmlid}
+      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}; --z-searchbar-tag-text-color: ${args["--z-searchbar-tag-text-color"]}; --z-searchbar-tag-bg: ${args["--z-searchbar-tag-bg"]}"
+      size=${args.size}
+      variant=${args.variant}
+    ></z-searchbar>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZSearchbar} from \".\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSearchbarStoriesArgs = ZSearchbar &\n  CSSVarsArguments<\"--z-searchbar-results-height\" | \"--z-searchbar-tag-text-color\" | \"--z-searchbar-tag-bg\">;\n\nconst StoryMeta = {\n  title: \"ZSearchbar\",\n  component: \"z-searchbar\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ControlSize),\n    },\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ButtonVariant),\n    },\n  },\n  args: {\n    \"preventSubmit\": false,\n    \"showSearchButton\": false,\n    \"searchButtonIconOnly\": false,\n    \"autocomplete\": false,\n    \"autocompleteMinChars\": 3,\n    \"resultsCount\": null,\n    \"resultsEllipsis\": true,\n    \"searchHelperLabel\": \"Cerca {searchString}\",\n    \"resultsItems\": [\n      {\n        label: \"first item\",\n      },\n      {\n        label: \"second item\",\n      },\n      {\n        label: \"third item\",\n      },\n      {\n        label: \"fourth item\",\n      },\n    ],\n    \"sortResultsItems\": false,\n    \"htmlid\": \"myId\",\n    \"placeholder\": \"my placeholder\",\n    \"value\": \"\",\n    \"--z-searchbar-results-height\": \"\",\n    \"--z-searchbar-tag-text-color\": \"var(--color-primary03)\",\n    \"--z-searchbar-tag-bg\": \"var(--color-hover-primary)\",\n    \"size\": ControlSize.BIG,\n    \"variant\": ButtonVariant.PRIMARY,\n  },\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSearchbarStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-searchbar\n      prevent-submit=${args.preventSubmit}\n      show-search-button=${args.showSearchButton}\n      search-button-icon-only=${args.searchButtonIconOnly}\n      autocomplete=${args.autocomplete}\n      autocomplete-min-chars=${args.autocompleteMinChars}\n      results-count=${args.resultsCount}\n      results-ellipsis=${args.resultsEllipsis}\n      search-helper-label=${args.searchHelperLabel}\n      results-items=${JSON.stringify(args.resultsItems)}\n      sort-results-items=${JSON.stringify(args.sortResultsItems)}\n      value=${args.value}\n      placeholder=${args.placeholder}\n      htmlid=${args.htmlid}\n      style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n      size=${args.size}\n      variant=${args.variant}\n    ></z-searchbar>\n  `,\n} satisfies Story;\n\nexport const SimpleSearch = {\n  parameters: {\n    controls: {\n      include: [\"value\", \"placeholder\", \"htmlid\", \"size\"],\n    },\n  },\n  args: {\n    htmlid: \"myIdSimple\",\n  },\n  render: (args) => html`\n    <z-searchbar\n      prevent-submit=\"false\"\n      show-search-button=${args.showSearchButton}\n      search-button-icon-only=${args.searchButtonIconOnly}\n      autcomplete=\"false\"\n      value=${args.value}\n      placeholder=${args.placeholder}\n      htmlid=${args.htmlid}\n      size=${args.size}\n    ></z-searchbar>\n  `,\n} satisfies Story;\n\nexport const Autocomplete = {\n  args: {\n    autocomplete: true,\n    htmlid: \"myIdAutocomplete\",\n    showSearchButton: false,\n    searchButtonIconOnly: false,\n  },\n  render: (args) => html`\n    <z-searchbar\n      prevent-submit=${args.preventSubmit}\n      show-search-button=${args.showSearchButton}\n      search-button-icon-only=${args.searchButtonIconOnly}\n      autocomplete=${args.autocomplete}\n      autocomplete-min-chars=${args.autocompleteMinChars}\n      results-count=${args.resultsCount}\n      results-ellipsis=${args.resultsEllipsis}\n      search-helper-label=${args.searchHelperLabel}\n      results-items=${JSON.stringify(args.resultsItems)}\n      sort-results-items=${JSON.stringify(args.sortResultsItems)}\n      value=${args.value}\n      placeholder=${args.placeholder}\n      htmlid=${args.htmlid}\n      style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n      size=${args.size}\n      variant=${args.variant}\n    ></z-searchbar>\n  `,\n} satisfies Story;\n\nexport const AutocompleteWithComplexItems = {\n  args: {\n    autocomplete: true,\n    htmlid: \"myIdGroupedAutocomplete\",\n    showSearchButton: false,\n    searchButtonIconOnly: false,\n    resultsItems: [\n      {\n        label: \"first item\",\n        icon: \"download\",\n        tag: {\n          text: \"Riservato all'insegnante\",\n          icon: \"teacher\",\n        },\n        category: \"Category A\",\n        subcategory: \"Subcategory A1\",\n      },\n      {\n        label: \"second item\",\n        icon: \"collezioni\",\n        category: \"Category B\",\n        subcategory: \"Subcategory B1\",\n      },\n      {\n        label: \"third item\",\n        icon: \"dictonary\",\n        category: \"Category A\",\n        subcategory: \"Subcategory A2\",\n      },\n      {\n        label: \"fourth item\",\n        icon: \"exercises-online\",\n        category: \"Category A\",\n        subcategory: \"Subcategory A1\",\n      },\n      {\n        label: \"fifth item\",\n        icon: \"interactives-maps\",\n        category: \"Category A\",\n        subcategory: \"Subcategory A1\",\n      },\n      {\n        label: \"sixth item\",\n        icon: \"textual-analysis\",\n        category: \"Category B\",\n        subcategory: \"Subcategory B1\",\n      },\n    ],\n  },\n  render: (args) => html`\n    <z-searchbar\n      prevent-submit=${args.preventSubmit}\n      show-search-button=${args.showSearchButton}\n      search-button-icon-only=${args.searchButtonIconOnly}\n      autocomplete=${args.autocomplete}\n      autocomplete-min-chars=${args.autocompleteMinChars}\n      results-count=${args.resultsCount}\n      results-ellipsis=${args.resultsEllipsis}\n      search-helper-label=${args.searchHelperLabel}\n      results-items=${JSON.stringify(args.resultsItems)}\n      sort-results-items=${JSON.stringify(args.sortResultsItems)}\n      value=${args.value}\n      placeholder=${args.placeholder}\n      htmlid=${args.htmlid}\n      style=\"--z-searchbar-results-height: ${args[\n        \"--z-searchbar-results-height\"\n      ]}; --z-searchbar-tag-text-color: ${args[\"--z-searchbar-tag-text-color\"]}; --z-searchbar-tag-bg: ${args[\n        \"--z-searchbar-tag-bg\"\n      ]}\"\n      size=${args.size}\n      variant=${args.variant}\n    ></z-searchbar>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-section-title/index.js

@@ -18,7 +18,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: '98a5c82a7087e6a67f0d76f91f87274b9fb4dcaa' }, h("slot", { key: 'c24aeee90fdcf9e7a68c6cbaff2d1a490b252c46', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'c7f5595456cc7601afb0fccb20b948802c58ad41', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: 'aae886e9941d8767af39a351671a7aaaf844176a' }, h("slot", { key: '08a1466c1d96e8f2dc754d3566bc2567bfd26dfd', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'ab9e30f7c179c37482d84db65729a3fa78fd9e06', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '4cad003315cf3df2e0dd6a7391035fd8e056e8b0', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '6e99ca4877aba8c76e4484be6fced23aa5b8e165', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,aAAa,CAAC;AAEtE;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,iBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,iBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,aAAa,CAAC;AAEtE;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-section-title/index.spec.js

@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { ZSectionTitle } from "./index";
 import { ZSectionTitleDividerPosition } from "../../beans";
+import { ZSectionTitle } from "./index";
 describe("Suite test ZNotification", () => {
     it("ZSectionTitle with secondary title should not render the z-divider", async () => {
         const page = await newSpecPage({

package/dist/collection/components/z-section-title/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-section-title/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,EAAC,4BAA4B,EAAC,MAAM,aAAa,CAAC;AAEzD,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;2BACe,4BAA4B,CAAC,KAAK;;;;yBAIpC;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZSectionTitle} from \"./index\";\nimport {ZSectionTitleDividerPosition} from \"../../beans\";\n\ndescribe(\"Suite test ZNotification\", () => {\n  it(\"ZSectionTitle with secondary title should not render the z-divider\", async () => {\n    const page = await newSpecPage({\n      components: [ZSectionTitle],\n      html: `<z-section-title\n        divider-position=${ZSectionTitleDividerPosition.AFTER}\n      >\n        <span slot=\"secondary-title\">Secondary title</span>\n        <span slot=\"primary-title\">Primary title</span>\n      </z-section-title>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-section-title divider-position=\"after\" uppercase=\"\">\n        <mock:shadow-root>\n          <slot name=\"secondary-title\"></slot>\n          <slot name=\"primary-title\"></slot>\n        </mock:shadow-root>\n        <span slot=\"secondary-title\">Secondary title</span>\n        <span slot=\"primary-title\">Primary title</span>\n      </z-section-title>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-section-title/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,4BAA4B,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE;2BACe,4BAA4B,CAAC,KAAK;;;;yBAIpC;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZSectionTitleDividerPosition} from \"../../beans\";\nimport {ZSectionTitle} from \"./index\";\n\ndescribe(\"Suite test ZNotification\", () => {\n  it(\"ZSectionTitle with secondary title should not render the z-divider\", async () => {\n    const page = await newSpecPage({\n      components: [ZSectionTitle],\n      html: `<z-section-title\n        divider-position=${ZSectionTitleDividerPosition.AFTER}\n      >\n        <span slot=\"secondary-title\">Secondary title</span>\n        <span slot=\"primary-title\">Primary title</span>\n      </z-section-title>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-section-title divider-position=\"after\" uppercase=\"\">\n        <mock:shadow-root>\n          <slot name=\"secondary-title\"></slot>\n          <slot name=\"primary-title\"></slot>\n        </mock:shadow-root>\n        <span slot=\"secondary-title\">Secondary title</span>\n        <span slot=\"primary-title\">Primary title</span>\n      </z-section-title>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-section-title/index.stories.js

@@ -0,0 +1,53 @@
+import { html } from "lit";
+import { ZSectionTitleDividerPosition } from "../../beans";
+import { getColorTokenArgConfig } from "../../utils/storybook-utils";
+import "./index";
+const StoryMeta = {
+    title: "ZSectionTitle",
+    component: "z-section-title",
+    argTypes: {
+        "dividerPosition": {
+            options: Object.values(ZSectionTitleDividerPosition),
+            control: {
+                type: "inline-radio",
+            },
+        },
+        "--z-section-title--divider-color": getColorTokenArgConfig(),
+    },
+    args: {
+        "uppercase": true,
+        "--z-section-title--divider-color": "var(--red500)",
+    },
+};
+export default StoryMeta;
+export const PrimaryTitleOnly = {
+    args: {
+        dividerPosition: ZSectionTitleDividerPosition.BEFORE,
+    },
+    render: (args) => html `
+    <z-section-title
+      .dividerPosition=${args.dividerPosition}
+      .uppercase=${args.uppercase}
+      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
+    >
+      <h4 slot="primary-title">Primary title</h4>
+    </z-section-title>
+  `,
+};
+export const SecondaryTitle = {
+    parameters: {
+        controls: {
+            exclude: ["dividerPosition"],
+        },
+    },
+    render: (args) => html `
+    <z-section-title
+      .uppercase=${args.uppercase}
+      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
+    >
+      <h5 slot="secondary-title">Secondary title</h5>
+      <h4 slot="primary-title">Primary title</h4>
+    </z-section-title>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-section-title/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,4BAA4B,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,iBAAiB,EAAE;YACjB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC;YACpD,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,kCAAkC,EAAE,sBAAsB,EAAE;KAC7D;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;QACjB,kCAAkC,EAAE,eAAe;KACpD;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,eAAe,EAAE,4BAA4B,CAAC,MAAM;KACrD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;mBAC1B,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;GAIvF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;SAC7B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;;GAKvF;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZSectionTitle} from \".\";\nimport {ZSectionTitleDividerPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSectionTitleStoriesArgs = ZSectionTitle & CSSVarsArguments<\"z-section-title--divider-color\">;\n\nconst StoryMeta = {\n  title: \"ZSectionTitle\",\n  component: \"z-section-title\",\n  argTypes: {\n    \"dividerPosition\": {\n      options: Object.values(ZSectionTitleDividerPosition),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"--z-section-title--divider-color\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"uppercase\": true,\n    \"--z-section-title--divider-color\": \"var(--red500)\",\n  },\n} satisfies Meta<ZSectionTitleStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSectionTitleStoriesArgs>;\n\nexport const PrimaryTitleOnly = {\n  args: {\n    dividerPosition: ZSectionTitleDividerPosition.BEFORE,\n  },\n  render: (args) => html`\n    <z-section-title\n      .dividerPosition=${args.dividerPosition}\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n\nexport const SecondaryTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"dividerPosition\"],\n    },\n  },\n  render: (args) => html`\n    <z-section-title\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h5 slot=\"secondary-title\">Secondary title</h5>\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n"]}