@zanichelli/albe-web-components 16.3.0 → 16.3.1

package/dist/collection/components/z-app-header/index.stories.js

@@ -24,11 +24,8 @@ const StoryMeta = {
 export default StoryMeta;
 const menuTemplate = () => {
     return html `
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
+    <z-menu slot="menu">
+      <h3>Menu label 1</h3>
       <a
         href=""
         slot="item"
@@ -71,17 +68,11 @@ const menuTemplate = () => {
         >Item 5</a
       >
     </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <a href>Menu label</a>
+    <z-menu slot="menu">
+      <a href>Menu label 2</a>
     </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
+    <z-menu slot="menu">
+      <h3>Menu label 3</h3>
       <a
         href=""
         slot="item"
@@ -124,11 +115,8 @@ const menuTemplate = () => {
         >Item 5</a
       >
     </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
+    <z-menu slot="menu">
+      <h3>Menu label 4</h3>
       <a
         href=""
         slot="item"
@@ -201,11 +189,10 @@ export const ProductLogo = {
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
       <h1 slot="title">Applicazione</h1>
-      <img
+      <div
+        class="story-product-logo"
         slot="product-logo"
-        src="src/assets/orientamento.svg"
-        alt=""
-      />
+      ></div>
     </z-app-header>`,
 };
 export const TopTitle = {
@@ -229,9 +216,6 @@ export const MenuWithTopTitle = {
             exclude: ["enableZLogo"],
         },
     },
-    args: {
-        enableOffcanvas: true,
-    },
     render: (args) => html `<z-app-header
       .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
@@ -293,7 +277,7 @@ export const Stuck = {
       .searchPageUrl=${args.searchPageUrl}
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}; --app-header-top-offset: 0"
     >
-      <h1 slot="title">Applicazione</h1>
+      <h1 slot="title">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>
       ${menuTemplate()}
     </z-app-header>`,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport {ZAppHeader} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-menu-section/index\";\nimport \"../z-menu/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderStoriesArgs = ZAppHeader & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n  title: \"ZAppHeader\",\n  component: \"z-app-header\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  subcomponents: {\n    ZMenu: \"z-menu\",\n    ZMenuSection: \"z-menu-section\",\n  },\n  args: {\n    \"--app-header-content-max-width\": \"100%\",\n    \"enableSearch\": false,\n    \"searchPageUrl\": \"\",\n    \"enableZLogo\": false,\n    \"enableOffcanvas\": false,\n  },\n} satisfies Meta<ZAppHeaderStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuTemplate = (): TemplateResult => {\n  return html`\n    <z-menu\n      slot=\"menu\"\n      floating\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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n    <z-menu\n      slot=\"menu\"\n      floating\n    >\n      <a href>Menu label</a>\n    </z-menu>\n    <z-menu\n      slot=\"menu\"\n      floating\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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n    <z-menu\n      slot=\"menu\"\n      floating\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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `;\n};\n\ntype Story = Meta<ZAppHeaderStoriesArgs>;\n\nexport const Title = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const ProductLogo = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <img\n        slot=\"product-logo\"\n        src=\"src/assets/orientamento.svg\"\n        alt=\"\"\n      />\n    </z-app-header>`,\n} satisfies Story;\n\nexport const TopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const MenuWithTopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableZLogo\"],\n    },\n  },\n  args: {\n    enableOffcanvas: true,\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const LongTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\", \"enableSearch\", \"searchPageUrl\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\">\n      <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n      <h2 slot=\"top-subtitle\">Jearl Walker, David Halliday, Robert Resnick</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n  args: {\n    enableOffcanvas: true,\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const Stuck = {\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">Scroll to see <code>stuck</code> prop in action.</div>\n      <div style=\"height: 200vh\">${Story()}</div>\n    `,\n  ],\n  parameters: {\n    docs: {\n      inlineStories: false,\n      iframeHeight: \"400px\",\n    },\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      stuck\n      .enableZLogo=${args.enableZLogo}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const SearchPageButton = {\n  parameters: {\n    controls: {\n      exclude: [\"searchPageUrl\", \"enableSearch\", \"enableOffcanvas\"],\n    },\n  },\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">\n        The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.\n      </div>\n      ${Story()}\n    `,\n  ],\n  render: (args) =>\n    html`<z-app-header\n      enable-search\n      .enableZLogo=${args.enableZLogo}\n      search-page-url=\"https://www.zanichelli.it\"\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport {ZAppHeader} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-menu-section/index\";\nimport \"../z-menu/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderStoriesArgs = ZAppHeader & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n  title: \"ZAppHeader\",\n  component: \"z-app-header\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  subcomponents: {\n    ZMenu: \"z-menu\",\n    ZMenuSection: \"z-menu-section\",\n  },\n  args: {\n    \"--app-header-content-max-width\": \"100%\",\n    \"enableSearch\": false,\n    \"searchPageUrl\": \"\",\n    \"enableZLogo\": false,\n    \"enableOffcanvas\": false,\n  },\n} satisfies Meta<ZAppHeaderStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuTemplate = (): TemplateResult => {\n  return html`\n    <z-menu slot=\"menu\">\n      <h3>Menu label 1</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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n    <z-menu slot=\"menu\">\n      <a href>Menu label 2</a>\n    </z-menu>\n    <z-menu slot=\"menu\">\n      <h3>Menu label 3</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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n    <z-menu slot=\"menu\">\n      <h3>Menu label 4</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 slot=\"item\">\n        <h3>Item 3</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 3.2</a\n        >\n      </z-menu-section>\n      <z-menu-section slot=\"item\">\n        <h3>Item 4</h3>\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.1</a\n        >\n        <a\n          href=\"\"\n          slot=\"section\"\n          >Item 4.2</a\n        >\n      </z-menu-section>\n      <a\n        href=\"\"\n        slot=\"item\"\n        >Item 5</a\n      >\n    </z-menu>\n  `;\n};\n\ntype Story = Meta<ZAppHeaderStoriesArgs>;\n\nexport const Title = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const ProductLogo = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <div\n        class=\"story-product-logo\"\n        slot=\"product-logo\"\n      ></div>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const TopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const MenuWithTopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const LongTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\", \"enableSearch\", \"searchPageUrl\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\">\n      <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n      <h2 slot=\"top-subtitle\">Jearl Walker, David Halliday, Robert Resnick</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n  args: {\n    enableOffcanvas: true,\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const Stuck = {\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">Scroll to see <code>stuck</code> prop in action.</div>\n      <div style=\"height: 200vh\">${Story()}</div>\n    `,\n  ],\n  parameters: {\n    docs: {\n      inlineStories: false,\n      iframeHeight: \"400px\",\n    },\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      stuck\n      .enableZLogo=${args.enableZLogo}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0\"\n    >\n      <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const SearchPageButton = {\n  parameters: {\n    controls: {\n      exclude: [\"searchPageUrl\", \"enableSearch\", \"enableOffcanvas\"],\n    },\n  },\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">\n        The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.\n      </div>\n      ${Story()}\n    `,\n  ],\n  render: (args) =>\n    html`<z-app-header\n      enable-search\n      .enableZLogo=${args.enableZLogo}\n      search-page-url=\"https://www.zanichelli.it\"\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-app-header/styles.css

@@ -1,32 +1,25 @@
 :host {
-  --app-header-content-max-width: 100%;
+  --app-header-content-max-width: ;
 
   /* Variable to set stuck header and drawer's top offset.
   Useful when something is absolutely positioned above the header. */
-  --app-header-top-offset: 48px;
-  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
+  --app-header-top-offset: ;
 
   /* Variable to customize header background color. */
-  --app-header-bg: var(--color-surface01);
-
-  /* Variable to customize stuck header background color. */
-  --app-header-stucked-bg: var(--color-surface01);
+  --app-header-bg: ;
 
   /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--color-default-text);
+  --app-header-text-color: ;
 
-  /* Variable to customize the title's line-height.
-  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
-  and use the same level as the one of the font size. */
-  --app-header-title-lineheight: 1.25;
+  /* Variable to customize stuck header background color. */
+  --app-header-stucked-bg: ;
 
   /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--color-default-text);
+  --app-header-stucked-text-color: ;
 
   position: relative;
   display: block;
-  box-shadow: 0 2px 4px 0 var(--shadow-color-base);
-  color: var(--app-header-text-color);
+  box-shadow: var(--shadow-2);
 }
 
 :host,
@@ -35,10 +28,14 @@
 }
 
 .heading-panel {
+  /* Title's line height. */
+  --title-line-height: 1.333;
+  --title-font-size: var(--font-size-6);
+
   position: relative;
   display: flex;
   width: 100%;
-  max-width: var(--app-header-content-max-width);
+  max-width: var(--app-header-content-max-width, 100%);
   flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
@@ -63,6 +60,10 @@
   justify-content: flex-start;
 }
 
+.heading-panel.has-menubar {
+  padding-bottom: 0;
+}
+
 .heading-panel .heading-container {
   flex-direction: column-reverse;
 }
@@ -71,7 +72,7 @@
   flex-direction: column;
 }
 
-:host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
+:host([enable-search][search-page-url]) .heading-panel .heading-container {
   flex-direction: row;
 }
 
@@ -79,23 +80,26 @@
   display: flex;
   width: 100%;
   flex-direction: row;
-  align-items: start;
+  align-items: flex-start;
 }
 
-img.z-logo {
-  content: url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>');
+.z-logo {
+  display: flex;
+  height: calc(var(--title-font-size) * var(--title-line-height));
+  align-items: center;
 }
 
-.heading-title > img.z-logo {
-  height: calc(var(--space-unit) * 3);
-  margin: 4px var(--space-unit) 0 0;
+.z-logo img {
+  height: 24px;
+  margin: 0 var(--space-unit) 0 0;
+  content: url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>');
 }
 
-:host([stuck]) .heading-stuck .heading-title > img.z-logo {
-  margin-top: 0;
+.product-logo {
+  display: none;
 }
 
-::slotted([slot="product-logo"]) {
+.product-logo ::slotted([slot="product-logo"]) {
   width: 32px;
   height: 32px;
   margin-right: var(--space-unit);
@@ -103,30 +107,32 @@ img.z-logo {
 }
 
 ::slotted([slot="title"]),
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
+::slotted([slot="stucked-title"]),
+.stucked-title {
   margin: 0;
-  font-family: "IBM Plex Serif", serif;
+  color: var(--app-header-text-color, var(--gray950));
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-sb);
 }
 
 ::slotted([slot="title"]) {
   display: -webkit-box;
   overflow: hidden;
   flex-grow: 1;
-  padding-right: calc(var(--space-unit) * 2);
   -webkit-box-orient: vertical;
-  font-size: var(--font-size-6);
+  font-size: var(--title-font-size);
   -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: var(--title-line-height);
   text-overflow: ellipsis;
-  white-space: initial;
 }
 
-:host(:not([menu-length="0"])) .p-left {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
+:host([enable-search]) ::slotted([slot="title"]) + * {
+  margin-left: calc(var(--space-unit) * 2);
 }
 
-:host(:is([enable-offcanvas="true"]):not([menu-length="0"])) {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
+:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle {
+  padding-left: calc(var(--space-unit) * 4 + var(--space-unit));
 }
 
 ::slotted([slot="top-subtitle"]) {
@@ -135,18 +141,17 @@ img.z-logo {
   max-width: 80%;
   margin: 0;
   -webkit-box-orient: vertical;
+  color: var(--color-default-text);
   font-family: var(--font-family-sans);
-  font-size: 14px;
+  font-size: var(--font-size-2);
   font-style: italic;
-  font-weight: 400;
+  font-weight: var(--font-rg);
   -webkit-line-clamp: 2;
-  line-height: 18.2px;
-  white-space: initial;
+  line-clamp: 2;
 }
 
 .menu-container {
   display: flex;
-  width: 100%;
   flex: 1 auto;
   column-gap: calc(var(--space-unit) * 4);
 }
@@ -155,7 +160,7 @@ img.z-logo {
   outline: none;
 }
 
-:host([menu-length="0"]:not([enable-search])) .menu-container,
+:host([menu-length="0"]) .menu-container,
 .menu-container:empty {
   display: none;
 }
@@ -167,7 +172,7 @@ img.z-logo {
 
 .menu-container ::slotted([slot="menu"]:not(:last-child))::after {
   position: absolute;
-  top: 50%;
+  top: calc(1.5em / 2); /* half the line-height of the label */
   right: calc(var(--space-unit) * -2);
   width: var(--border-size-small);
   height: 1em;
@@ -187,49 +192,52 @@ z-searchbar {
 .heading-stuck {
   position: fixed;
   z-index: 20;
-  top: var(--app-header-top-offset);
+  top: var(--app-header-top-offset, 48px);
   left: 0;
   width: 100%;
   max-width: 100%;
   animation: slide-stuck-heading-in 250ms ease-out;
-  background: var(--app-header-stucked-bg);
+  background: var(--app-header-stucked-bg, var(--color-surface01));
   box-shadow: var(--shadow-2);
-  color: var(--app-header-stucked-text-color);
+  color: var(--app-header-stucked-text-color, var(--color-default-text));
 }
 
 .heading-stuck-content {
   display: flex;
-  max-width: var(--app-header-content-max-width);
+  max-width: var(--app-header-content-max-width, 100%);
   align-items: center;
   padding: var(--space-unit) var(--grid-margin);
   margin: 0 auto;
 }
 
 .heading-stuck .heading-title {
+  --title-font-size: var(--font-size-5);
+  --title-line-height: 1.4;
+
   overflow: hidden;
+  align-items: center;
 }
 
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
-  font-size: var(--font-size-9);
-  font-weight: var(--font-bd);
-  line-height: 1.25;
+.heading-stuck .heading-title:not(:last-child) {
+  margin-right: calc(var(--space-unit) * 2);
 }
 
-.heading-stuck .heading-title [name="stucked-title"] {
-  display: block;
+.heading-stuck .stucked-title {
   overflow: hidden;
-  margin-right: calc(var(--space-unit) * 2);
-  font-size: var(--font-size-5);
+  font-size: var(--title-font-size);
+  line-height: var(--title-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.heading-stuck-content z-button {
+.heading-stuck-content z-button.search-page-button {
   margin-left: auto;
 }
 
 .drawer-trigger {
+  display: flex;
+  height: calc(var(--title-font-size) * var(--title-line-height));
+  align-items: center;
   padding: 0;
   border: 0;
   margin-right: var(--space-unit);
@@ -241,18 +249,13 @@ z-searchbar {
   outline: none;
 }
 
-.drawer-trigger:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-.drawer-trigger:focus-visible {
+.drawer-trigger:focus:focus-visible z-icon {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .drawer-trigger z-icon {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
+  --z-icon-width: calc(var(--space-unit) * 4);
+  --z-icon-height: calc(var(--space-unit) * 4);
 
   fill: currentcolor;
 }
@@ -270,7 +273,6 @@ z-offcanvas[open] .drawer-content {
   width: 100%;
   flex: 1 auto;
   flex-direction: column;
-  row-gap: calc(var(--space-unit) * 2.5);
 }
 
 z-offcanvas[open] .drawer-content ::slotted(z-menu) {
@@ -278,8 +280,8 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
 }
 
 .drawer-close {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
+  --z-icon-width: calc(var(--space-unit) * 4);
+  --z-icon-height: calc(var(--space-unit) * 4);
 
   padding: 0;
   border: 0;
@@ -287,10 +289,8 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
   appearance: none;
   background: transparent;
   border-radius: 0;
-  color: inherit;
   cursor: pointer;
   fill: currentcolor;
-  font-size: inherit;
   outline: none;
 }
 
@@ -300,67 +300,50 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
 
 /* Tablet breakpoint */
 @media (min-width: 768px) {
-  :host([enable-search]:not([search-page-url])) .heading-container .heading-title {
-    flex-wrap: nowrap;
-  }
-
-  z-searchbar {
-    width: 30%;
-    padding-top: 0;
-  }
-
-  ::slotted([slot="title"]) {
-    font-size: var(--font-size-9);
-  }
+  .heading-panel {
+    --title-font-size: var(--font-size-9);
 
-  .heading-title {
-    align-items: center;
+    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);
   }
 
-  .heading-container .heading-title {
-    align-items: flex-start;
+  :host([enable-search][search-page-url]) .heading-panel .heading-container {
+    flex-direction: column;
   }
 
-  div.heading-container .heading-title button,
-  div.heading-container .heading-title z-searchbar,
-  div.heading-container .heading-title img,
-  div.heading-container .heading-title ::slotted([slot="product-logo"]),
-  div.heading-container .heading-title .search-page-button {
-    margin-top: var(--space-unit);
+  .heading-panel .heading-container {
+    flex-direction: column;
+    margin-right: auto;
   }
 
-  .heading-title > img.z-logo {
+  .z-logo img {
     height: 32px;
   }
 
-  .heading-panel {
+  .product-logo {
+    display: flex;
+    height: calc(var(--title-font-size) * var(--title-line-height));
     align-items: center;
-    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);
-  }
-
-  .heading-panel.has-menu {
-    padding-bottom: 0;
   }
 
-  :host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
-    flex-direction: column;
+  :host([enable-search]:not([search-page-url])) .heading-container .heading-title {
+    flex-wrap: nowrap;
   }
 
-  .heading-panel .heading-container {
-    flex-direction: column;
-    margin-right: auto;
+  z-searchbar {
+    width: 30%;
+    height: calc(var(--title-font-size) * var(--title-line-height));
+    padding-top: 0;
   }
 
   .menu-container {
     flex: initial;
-    align-items: center;
   }
 
-  :host([menu-length="0"]) .menu-container:not(:empty) {
-    height: calc(var(--space-unit) * 4.5 * var(--app-header-title-lineheight));
+  .menu-container > [role="menubar"] {
+    display: contents;
   }
 
-  :host(:not([enable-offcanvas="false"])) .menu-container {
+  :host(:not([enable-offcanvas])) .menu-container {
     margin-top: calc((var(--space-unit) * 1.75));
   }
 
@@ -368,31 +351,22 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
     display: none;
   }
 
-  .heading-stuck .heading-title > *,
-  .heading-stuck .heading-title [name="stucked-title"] {
-    font-size: var(--font-size-8);
+  .heading-stuck .heading-title {
+    --title-font-size: var(--font-size-8);
+    --title-line-height: 1.5;
   }
 
   .heading-stuck-content {
     padding: 6px var(--grid-margin);
   }
 
-  ::slotted([slot="product-logo"]) {
-    margin-right: calc(var(--space-unit) * 1.5);
-  }
-
-  /* stylelint-disable-next-line selector-not-notation */
-  :host(:not([enable-offcanvas]):not([menu-length="0"])) {
+  :host(:not([enable-offcanvas], [menu-length="0"])) {
     padding-left: 0;
   }
 }
 
 /* Desktop breakpoint */
 @media (min-width: 1152px) {
-  ::slotted([slot="product-logo"]) {
-    margin-right: var(--space-unit);
-  }
-
   z-searchbar {
     min-width: calc(var(--space-unit) * 45);
     flex: initial;

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '851bdac7b9b7c2dd4a5042a78cfacfe234051928', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'e3217c0633b68f55bd62c26fd1afb6d00dfe2708' })));
+        return (h(Host, { key: 'fe408ff28d71e45649f8881b395da6b0c1fd3e96', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '2999a9a7cd442b5d9c4a74e0c68418497335045e' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

package/dist/collection/components/z-aria-alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACvC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc,CAAC,MAAM;KAC5B;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBU,IAAI,CAAC,IAAI;;;;aAId;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBY,IAAI,CAAC,IAAI;;;;;aAKhB;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAriaAlert} from \".\";\nimport {ZAriaAlertMode} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-visually-hidden/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZAriaAlert\",\n  component: \"z-aria-alert\",\n  argTypes: {\n    mode: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ZAriaAlertMode),\n    },\n  },\n  args: {\n    mode: ZAriaAlertMode.POLITE,\n  },\n} satisfies Meta<ZAriaAlert>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<script>\n        function myFunction() {\n          const myTimeout = setTimeout(myDelayedFunction, 3000);\n        }\n        function myDelayedFunction() {\n          var myalert = document.getElementById(\"idAlert\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert deafult</h2>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction()\">Click to say something</z-button>\n        <z-aria-alert\n          id=\"idAlert\"\n          mode=\"${args.mode}\"\n        >\n          Testo NON nascosto\n        </z-aria-alert>\n      </div>`,\n};\n\nexport const VisuallyHidden = {\n  render: (args) =>\n    html`<script>\n        function myFunction2() {\n          const myTimeout = setTimeout(myDelayedFunction2, 3000);\n        }\n        function myDelayedFunction2() {\n          var myalert = document.getElementById(\"idAlert2\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert with VisuallyHidden</h2>\n        <span>\n          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to\n          visually hide the text.\n        </span>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction2()\">Click to say something but visually hidden</z-button>\n        <z-visually-hidden>\n          <z-aria-alert\n            id=\"idAlert2\"\n            mode=\"${args.mode}\"\n          >\n            Testo qua\n          </z-aria-alert>\n        </z-visually-hidden>\n      </div>`,\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACvC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc,CAAC,MAAM;KAC5B;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBU,IAAI,CAAC,IAAI;;;;aAId;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBY,IAAI,CAAC,IAAI;;;;;aAKhB;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAriaAlert} from \".\";\nimport {ZAriaAlertMode} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-visually-hidden/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZAriaAlert\",\n  component: \"z-aria-alert\",\n  argTypes: {\n    mode: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ZAriaAlertMode),\n    },\n  },\n  args: {\n    mode: ZAriaAlertMode.POLITE,\n  },\n} satisfies Meta<ZAriaAlert>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<script>\n        function myFunction() {\n          const myTimeout = setTimeout(myDelayedFunction, 3000);\n        }\n        function myDelayedFunction() {\n          var myalert = document.getElementById(\"idAlert\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert deafult</h2>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction()\">Click to say something</z-button>\n        <z-aria-alert\n          id=\"idAlert\"\n          mode=\"${args.mode}\"\n        >\n          Testo NON nascosto\n        </z-aria-alert>\n      </div>`,\n};\n\nexport const VisuallyHidden = {\n  render: (args) =>\n    html`<script>\n        function myFunction2() {\n          const myTimeout = setTimeout(myDelayedFunction2, 3000);\n        }\n        function myDelayedFunction2() {\n          var myalert = document.getElementById(\"idAlert2\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert with VisuallyHidden</h2>\n        <span>\n          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to\n          visually hide the text.\n        </span>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction2()\">Click to say something but visually hidden</z-button>\n        <z-visually-hidden>\n          <z-aria-alert\n            id=\"idAlert2\"\n            mode=\"${args.mode}\"\n          >\n            Testo qua\n          </z-aria-alert>\n        </z-visually-hidden>\n      </div>`,\n};\n"]}

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '4be97c710d33cc6dd35c1f0a7141b7f13c6e161f', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '17a097738ce186c791794f5f8192cd46845df2a6', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'af2d27fb007244f5830151e24e68cc757761d84e' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'c507bc501c79eeb009e979242b5224a1fab85470', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '178497c915f987e2f2daff1e17282062dfac9110' }, this.text.substring(0, 2)), this.image && (h("img", { key: '57221f7fca8e9dae9afeea77de4db247d3ad3174', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }