@zanichelli/albe-web-components 19.1.3 → 19.2.0

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

@@ -1,5 +1,9 @@
 import { Host, h } from "@stencil/core";
-import { ICONS } from "../../constants/iconset";
+import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
+/**
+ * Component to render an SVG icon from the internal icon set, selected by `name`.
+ * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
+ */
 export class ZIcon {
     constructor() {
         this.name = undefined;
@@ -7,15 +11,25 @@ export class ZIcon {
         this.width = undefined;
         this.iconid = undefined;
         this.fill = undefined;
+        this.indicatorColor = undefined;
     }
+    /**
+     * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.
+     * @param iconValue The SVG path data or polygon points from the ICONS set.
+     */
     selectPathOrPolygon(iconValue) {
         if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
-            return h("path", { d: ICONS[this.name] });
+            return h("path", { d: iconValue });
         }
-        return h("polygon", { points: ICONS[this.name] });
+        return h("polygon", { points: iconValue });
     }
     render() {
-        return (h(Host, { key: '427cac0797fc718938ee45da5999b8a2bf70e570', "aria-hidden": "true" }, h("svg", { key: '23275947c49b69095acbec1df2ecec0f04da3525', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+        const svgAttrs = {
+            viewBox: "0 0 1000 1000",
+            width: this.width,
+            height: this.height,
+        };
+        return (h(Host, { key: '09183fdee2304748943d57bcfb10921369a84159', "aria-hidden": "true" }, h("div", { key: '8d1f3b6dd3a7cc69383be36f1951ee29694655b6', class: "icon-wrapper" }, h("svg", Object.assign({ key: '0ac79b86fdfa9083a7c4dc89d5a970d3fd89ded5', id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined }, svgAttrs), this.selectPathOrPolygon(ICONS[this.name])), COLOR_INDICATOR_ICONS.includes(this.name) && (h("svg", Object.assign({ key: '9b08ff27c45ced5b70184b495f66ca3accf756df', class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00" }, svgAttrs), this.selectPathOrPolygon(ICONS["picker-color"]))))));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -43,7 +57,7 @@ export class ZIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "icon name"
+                    "text": "Icon name"
                 },
                 "attribute": "name",
                 "reflect": false
@@ -60,7 +74,7 @@ export class ZIcon {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "icon height (optional)"
+                    "text": "Icon height (optional)"
                 },
                 "attribute": "height",
                 "reflect": false
@@ -77,7 +91,7 @@ export class ZIcon {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "icon width (optional)"
+                    "text": "Icon width (optional)"
                 },
                 "attribute": "width",
                 "reflect": false
@@ -94,7 +108,7 @@ export class ZIcon {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "icon id (optional)"
+                    "text": "HTML `id` attribute (optional)"
                 },
                 "attribute": "iconid",
                 "reflect": false
@@ -111,10 +125,27 @@ export class ZIcon {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "icon fill (optional)"
+                    "text": "Name of the CSS color token to use for the icon fill color (e.g. `blue500`)."
                 },
                 "attribute": "fill",
                 "reflect": false
+            },
+            "indicatorColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color to use to fill the icon's color indicator, if it has one.\nCan be any valid value for the `fill` svg attribute.\nIf the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect."
+                },
+                "attribute": "indicator-color",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,KAAK;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;QAC5C,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** icon name */\n  @Prop()\n  name: string;\n\n  /** icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** icon id (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** icon fill (optional) */\n  @Prop()\n  fill?: string;\n\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={ICONS[this.name]}></path>;\n    }\n\n    return <polygon points={ICONS[this.name]}></polygon>;\n  }\n\n  render(): SVGElement {\n    return (\n      <Host aria-hidden=\"true\">\n        <svg\n          viewBox=\"0 0 1000 1000\"\n          width={this.width}\n          height={this.height}\n          id={this.iconid}\n          fill={this.fill ? `var(--${this.fill})` : \"\"}\n        >\n          {this.selectPathOrPolygon(ICONS[this.name])}\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,KAAK;;;;;;;;;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG;YACf,OAAO,EAAE,eAAe;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DAAK,KAAK,EAAC,cAAc;gBACvB,0EACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,IAC/C,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC;gBACL,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAC5C,0EACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,IACpC,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  render(): SVGElement {\n    const svgAttrs = {\n      viewBox: \"0 0 1000 1000\",\n      width: this.width,\n      height: this.height,\n    };\n\n    return (\n      <Host aria-hidden=\"true\">\n        <div class=\"icon-wrapper\">\n          <svg\n            id={this.iconid || undefined}\n            fill={this.fill ? `var(--${this.fill})` : undefined}\n            {...svgAttrs}\n          >\n            {this.selectPathOrPolygon(ICONS[this.name])}\n          </svg>\n          {COLOR_INDICATOR_ICONS.includes(this.name) && (\n            <svg\n              class=\"color-indicator\"\n              fill={this.indicatorColor || \"#FFFFFF00\"}\n              {...svgAttrs}\n            >\n              {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n            </svg>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,20 +1,11 @@
 import { html } from "lit";
+import { COLOR_INDICATOR_ICONS } from "../../constants/iconset";
 import { getColorTokens } from "../../utils/storybook-utils";
 import "./index";
 const StoryMeta = {
     title: "ZIcon",
     component: "z-icon",
     argTypes: {
-        width: {
-            control: {
-                type: "text",
-            },
-        },
-        height: {
-            control: {
-                type: "text",
-            },
-        },
         fill: {
             options: getColorTokens().map((token) => token.replace("--", "")),
             control: {
@@ -32,10 +23,10 @@ const StoryMeta = {
 export default StoryMeta;
 export const Default = {
     render: (args) => html `<z-icon
-      name="${args.name}"
-      height="${args.height}"
-      width="${args.width}"
-      fill="${args.fill}"
+      name=${args.name}
+      height=${args.height}
+      width=${args.width}
+      fill=${args.fill}
     ></z-icon>`,
 };
 export const ZIconRem = {
@@ -46,10 +37,35 @@ export const ZIconRem = {
         fill: "color-primary01",
     },
     render: (args) => html `<z-icon
-      name="${args.name}"
-      height="${args.height}"
-      width="${args.width}"
-      fill="${args.fill}"
+      name=${args.name}
+      height=${args.height}
+      width=${args.width}
+      fill=${args.fill}
+    ></z-icon>`,
+};
+export const ColorIndicator = {
+    argTypes: {
+        name: {
+            options: COLOR_INDICATOR_ICONS,
+            control: { type: "select" },
+        },
+        indicatorColor: {
+            control: { type: "color" },
+        },
+    },
+    args: {
+        name: COLOR_INDICATOR_ICONS[0],
+        fill: "color-black",
+        indicatorColor: "#ff0000",
+        width: 64,
+        height: 64,
+    },
+    render: (args) => html `<z-icon
+      name=${args.name}
+      height=${args.height}
+      width=${args.width}
+      fill=${args.fill}
+      .indicatorColor=${args.indicatorColor}
     ></z-icon>`,
 };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;eACZ,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;eACR;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;eACZ,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;eACR;CACE,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZIcon\",\n  component: \"z-icon\",\n  argTypes: {\n    width: {\n      control: {\n        type: \"text\",\n      },\n    },\n    height: {\n      control: {\n        type: \"text\",\n      },\n    },\n    fill: {\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    name: \"download\",\n    height: 24,\n    width: 24,\n    fill: \"color-primary01\",\n  },\n} satisfies Meta<ZIcon>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZIcon>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-icon\n      name=\"${args.name}\"\n      height=\"${args.height}\"\n      width=\"${args.width}\"\n      fill=\"${args.fill}\"\n    ></z-icon>`,\n} satisfies Story;\n\nexport const ZIconRem = {\n  args: {\n    name: \"download\",\n    height: \"1.125rem\",\n    width: \"1.125rem\",\n    fill: \"color-primary01\",\n  },\n  render: (args) =>\n    html`<z-icon\n      name=\"${args.name}\"\n      height=\"${args.height}\"\n      width=\"${args.width}\"\n      fill=\"${args.fill}\"\n    ></z-icon>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,iBAAiB;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;eACP;CACE,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,qBAAqB;YAC9B,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC;SACzB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC;QAC9B,IAAI,EAAE,aAAa;QACnB,cAAc,EAAE,SAAS;QACzB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;cACZ,IAAI,CAAC,KAAK;aACX,IAAI,CAAC,IAAI;wBACE,IAAI,CAAC,cAAc;eAC5B;CACE,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {COLOR_INDICATOR_ICONS} from \"../../constants/iconset\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZIcon\",\n  component: \"z-icon\",\n  argTypes: {\n    fill: {\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    name: \"download\",\n    height: 24,\n    width: 24,\n    fill: \"color-primary01\",\n  },\n} satisfies Meta<ZIcon>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZIcon>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-icon\n      name=${args.name}\n      height=${args.height}\n      width=${args.width}\n      fill=${args.fill}\n    ></z-icon>`,\n} satisfies Story;\n\nexport const ZIconRem = {\n  args: {\n    name: \"download\",\n    height: \"1.125rem\",\n    width: \"1.125rem\",\n    fill: \"color-primary01\",\n  },\n  render: (args) =>\n    html`<z-icon\n      name=${args.name}\n      height=${args.height}\n      width=${args.width}\n      fill=${args.fill}\n    ></z-icon>`,\n} satisfies Story;\n\nexport const ColorIndicator = {\n  argTypes: {\n    name: {\n      options: COLOR_INDICATOR_ICONS,\n      control: {type: \"select\"},\n    },\n    indicatorColor: {\n      control: {type: \"color\"},\n    },\n  },\n  args: {\n    name: COLOR_INDICATOR_ICONS[0],\n    fill: \"color-black\",\n    indicatorColor: \"#ff0000\",\n    width: 64,\n    height: 64,\n  },\n  render: (args) =>\n    html`<z-icon\n      name=${args.name}\n      height=${args.height}\n      width=${args.width}\n      fill=${args.fill}\n      .indicatorColor=${args.indicatorColor}\n    ></z-icon>`,\n} satisfies Story;\n"]}

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

@@ -5,10 +5,23 @@
   vertical-align: middle;
 }
 
-:host svg:not([width]) {
+.icon-wrapper {
+  position: relative;
+  z-index: 0;
+  display: block;
+}
+
+svg:not([width]) {
   width: var(--z-icon-width, 1.125rem);
 }
 
-:host svg:not([height]) {
+svg:not([height]) {
   height: var(--z-icon-height, 1.125rem);
 }
+
+svg.color-indicator {
+  position: absolute;
+  z-index: -1;
+  bottom: 0;
+  left: 0;
+}

package/dist/collection/components/z-info-box/index.js

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '18298328abf8d0e88340408882bdc529b55c1a28', id: this.boxid }, h("slot", { key: '297bb1bbd8e6adc082e3552ac2222983b1b11211', name: "content" }), this.isclosable && (h("z-icon", { key: 'fa3fa5831984754d4c8533d23437a4773bf926a6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '770d8904081080758219f87d24f5a56846f1fad1', id: this.boxid }, h("slot", { key: 'a6fa079647709fc3c8326c2d73cdd1da884c4b58', name: "content" }), this.isclosable && (h("z-icon", { key: '63de143e010971175608c651d2d2f0c87ee98797', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/index.js

@@ -50,7 +50,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '250676e5bde8cb158ff19dd85c5b65aba329ab6d', open: this.open }, h("button", { key: 'ae9bd0a7a96c781ebc6e68f70b0553d9d08b8c4d', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'cda367464294fcdb6e87b7dd8804470fc600a196', name: this.icon }), this.label && h("span", { key: '33ee450958960b0eed18c6b630655c87d34d4b0f', class: "z-info-reveal-label" }, this.label)), h("div", { key: '717f241bbbd1034b8f7117d0875a859a27ecc3d0', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'f44d74a6183fdda5560fe8ced2e07ef12748b4b9' }), h("button", { key: '5071effe3449b8fe0285c080a0d9cb14be2b033c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '9f3088b1e5398bea476ea2da203cb8e2e106ea89', name: "multiply" })))));
+        return (h(Host, { key: '1513bcc5c069d2139b545336a7727318c858715a', open: this.open }, h("button", { key: 'c9be4b8852ea1b3c304e0cb4ad4fb91cd6317b89', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '28ca4682e7b5df0f0f32e35347ff5ee6fadf5e50', name: this.icon }), this.label && h("span", { key: '5addb4ddd3faafda6c8643d601589ffa6401b736', class: "z-info-reveal-label" }, this.label)), h("div", { key: '303f34b830370e5272ef88ebbcba57a7167f8ff8', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'df5e74f3c5b119ae6dd76d817e0f4040abddfdc7' }), h("button", { key: 'cec932ffcdb5f5d1c2738f3ba5bf59621f3f114c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'c47908d600b21d38fc3135755c83545ed78fffcb', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -261,7 +261,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '659906d684e53987ffe6ca8f05d74abb98594367' }, input);
+        return h(Host, { key: '12e6993a9f2e94db2300ccce3df5b839db56b09b' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-input-message/index.js

@@ -18,7 +18,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'd3c9ebc08047c7dda297e667f0923025a123c218' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'fd12602621b437c130e82fe747e422fc98b3a87e', name: this.statusIcons[this.status] }), h("span", { key: 'b3af731acdef8e2c890789f158d9db68e426f798', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: '316945f2c121bb059ee4faebee44901d1e0169bf' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'f0732ad997a4d0ae8c51149e084bac772fd6bc59', name: this.statusIcons[this.status] }), h("span", { key: '466898eee1e923d9ffa259ec8a32585be01e3b7b', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '75a515faadd75ea3f21ae80ca6a4f579223ad1cd', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '7e752127614823afe2441a9d3d316d9974f593d1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -389,7 +389,7 @@ export class ZMenu {
             },
             "htmlTabindex": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\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?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\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?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '4fbaa9a39d87fd247d605d32e81f37293671d95b', open: this.open }, h("button", { key: '25b5f34bb741671781fddabe18694a92d19c06c9', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '9ed5d1309acb2f8a17a583e7a96eddc8741da7c2', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '1677b363b4894c04bee3cae53a604baad136236a', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '74f37c1f2850cca5bf7fe756107c6984f3a7dd13', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '8382266ea2f2a3c04beab0d6304a459a5f56a48b', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'a859947e3015a104f32db157c715982a1ed29cf5', open: this.open }, h("button", { key: '5c130955c62fcce5d88b92312076da69f307eaee', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '28557c741c733149ea51ca68f499374dcf2eb134', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'bfa97fe61fde93902531e09dcdeb729066d2e66f', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'd9a7df39c426fecbc3beeefc2f5a08aed3f2ccbf', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e2f14a7cf055715bbbb8b712a3d112af3b712031', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'ff8e8cf9ce5684a8ca081ab2aec3ef1c8824b6ae', class: {
+        return (h("dialog", { key: '67f0fc8f114e0a5d91b389fdb245106582cc642d', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '94c33c53083aafc4607fcb4b9c099c7d02c035b4', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'e8f4faf3d8a8e43294d6d1bfc97e20e1706a1991', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '0e17ec7ccaa1376b9cdabde14355fc6dcbec4f26', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '09a5a59ca386289939c61e29f79d201454d41165' }, this.modaltitle && h("h1", { key: '0cf7deea5e044b358882ae0e7bfe4502de1318f5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '2fde62ccc507d999ccd4fd83aa369128e97b9b0c', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'e778555f2d7d88a965e454ee1231004da8d293e7', class: {
+            }, id: this.modalid }, h("header", { key: 'f039718406c6e3459ad5fa83fa596eb4f266f986', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'bf8c4f222aa0c89e8ffe98a7e266b043245c6901' }, this.modaltitle && h("h1", { key: '3dc7922ebe77d3ccf404101e138913a8f236e888', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'f8e5d4384f44f87b4b3925041caa4ad6037a9c8e', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '8834d8d97223d0653c853ca5ff4f93c5ebdaf3a7', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: 'acee4bb3444264df0b26a465c52f2ee282ccca76', name: "modalContent" }))), h("div", { key: '9abb8e64380030960d5669bec37a7f2f64d78693', class: {
+            }, id: "modal-content" }, h("slot", { key: '37dd8afe8e3926853e22da79e853ba802cb379a9', name: "modalContent" }))), h("div", { key: '0637fefbec2fa0a620be36be10ce0704f39c72ed', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-navigation-tabs/index.js

@@ -221,10 +221,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
+        return (h(Host, { key: 'c676fe99b0eb18fceb58ffa7412e4e1659acc89e', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'e353cd0e1e22d6e4422f547a318819b3f2736479', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '9d7e5126d77fbebf48423f0b34103bd1eb59dc3a', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '854e67c8c662c21926c71fab0725113632f6f14e', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'a4fdefd6a4419c97b4bfab349c88285abe37f14f' })), h("button", { key: 'bf0247eaef092c9b0dd068fe0d4876e3aaecad4e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '02018a4474db67cf853941a2d6daa002303419c7', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '5bc1e8046c14e46f02f9667939709a267cb1265a' }, this.contenticonname && (h("z-icon", { key: '7a944afae100f5fea48ca8499b6a0a035a6d289e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '038391eb846f043bc83c236e6e18998797bcb7a3', class: "content-container" }, h("div", { key: '330233ee7524fb271ffa5231a86b6cd906b2994d', class: "content-text" }, h("slot", { key: '290343fa633f1969d4f1059047797b16c3da9860' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '096b5cfdb55bac40adc9b2f56b9a4dc739ad4cc1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '80d985cbcd6501f9640dc2e16ac978de731a0d24', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'd7fe5573c93ac7ab36ccbecc01972b8d3cccc8bd', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,12 +11,12 @@
   outline: none;
 }
 
-:host[sticky] {
+:host([sticky]) {
   position: sticky;
   top: var(--z-notification--top-offset);
 }
 
-:host[sticky],
+:host([sticky]),
 :host([showshadow]) {
   box-shadow: var(--shadow-3);
 }