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

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

@@ -0,0 +1,151 @@
+import { h } from "@stencil/core";
+import { PopoverPosition } from "../../beans";
+/**
+ * Tooltip component.
+ * It is basically a wrapper for the `<z-popover>` component with custom configuration.
+ *
+ * @cssprop --z-tooltip-theme--surface - background color of the popover.
+ * @cssprop --z-tooltip-theme--text - foreground color of the popover.
+ * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
+ */
+export class ZTooltip {
+    constructor() {
+        this.position = PopoverPosition.AUTO;
+        this.dark = false;
+        this.open = false;
+        this.bindTo = undefined;
+        this.closable = true;
+    }
+    onPopoverOpenChange() {
+        this.open = this.popoverEl.open;
+    }
+    render() {
+        return (h("z-popover", { key: 'ed88c22d97e3e84963b0d3b7c6ee03d401aa5ce8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: '6b3cd438f4ab6cfb3459f67f9e8ea81b554a3ccb' })));
+    }
+    static get is() { return "z-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPosition",
+                    "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
+                    "references": {
+                        "PopoverPosition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::PopoverPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip position."
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "PopoverPosition.AUTO"
+            },
+            "dark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable tooltip dark mode."
+                },
+                "attribute": "dark",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The open state of the tooltip."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "bindTo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLElement",
+                    "resolved": "HTMLElement | string",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selector or the element bound with the tooltip."
+                },
+                "attribute": "bind-to",
+                "reflect": false
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects `closable` prop of the popover.\n\"If true, the popover can be closed by clicking outside of it or pressing the escape key.\nOtherwise, it will be closed only programmatically (by setting `open` to `false`).\""
+                },
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "openChange",
+                "method": "onPopoverOpenChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,123 @@
+import { html } from "lit";
+import { PopoverPosition } from "../../beans";
+import { getColorTokenArgConfig } from "../../utils/storybook-utils";
+import "../z-button/index";
+import "./index";
+import "./index.stories.css";
+/**
+ * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`
+ * On the following Story, the "position" prop can be set only for the original positions of the `z-tooltip` by design.
+ */
+const StoryMeta = {
+    title: "ZTooltip",
+    component: "z-tooltip",
+    argTypes: {
+        "position": {
+            options: [
+                PopoverPosition.AUTO,
+                PopoverPosition.TOP,
+                PopoverPosition.BOTTOM,
+                PopoverPosition.LEFT,
+                PopoverPosition.RIGHT,
+                PopoverPosition.TOP_LEFT,
+                PopoverPosition.TOP_RIGHT,
+                PopoverPosition.BOTTOM_LEFT,
+                PopoverPosition.BOTTOM_RIGHT,
+            ],
+            control: {
+                type: "select",
+            },
+        },
+        "--z-tooltip-theme--surface": getColorTokenArgConfig(),
+    },
+    args: {
+        "dark": false,
+        "--z-tooltip-theme--surface": "var(--color-surface01)",
+        "position": PopoverPosition.LEFT,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `
+    <div class="tooltip-container">
+      <z-button
+        id="trigger"
+        icon="plus-filled"
+      ></z-button>
+      <z-tooltip
+        .position=${args.position}
+        .dark=${args.dark}
+        bind-to="#trigger"
+        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
+      >
+        <div class="container">
+          <z-button>Open</z-button>
+          <z-button>Save as</z-button>
+          <z-button>Share</z-button>
+        </div>
+      </z-tooltip>
+    </div>
+    <script>
+      document.querySelector("#trigger").addEventListener("click", () => {
+        if (document.querySelector("z-tooltip").open) {
+          document.querySelector("z-tooltip").open = false;
+        } else {
+          document.querySelector("z-tooltip").open = true;
+        }
+      });
+    </script>
+  `,
+};
+/**
+ * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.
+ * In the Story below, the tooltip is opened hovering the button.
+ */
+export const AutocloseOff = {
+    render: (args) => html `
+    <div class="tooltip-container">
+      <z-button
+        id="info-button"
+        icon="arrow-clockwise-up-left"
+      ></z-button>
+      <z-tooltip
+        .position="${args.position}"
+        .dark="${args.dark}"
+        closable="false"
+        bind-to="#info-button"
+        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
+      >
+        <span class="tooltip-info-text">Clicca per fare girare la freccia</span>
+      </z-tooltip>
+    </div>
+    <script>
+      button = document.querySelector("#info-button");
+      tooltip = document.querySelector("z-tooltip");
+      button.addEventListener("mouseover", () => {
+        tooltip.open = true;
+      });
+      button.addEventListener("focusin", () => {
+        tooltip.open = true;
+      });
+      button.addEventListener("mouseout", () => {
+        tooltip.open = false;
+      });
+      button.addEventListener("focusout", () => {
+        tooltip.open = false;
+      });
+      button.onclick = () => {
+        switch (button.icon) {
+          case "arrow-clockwise-up-left":
+            button.icon = "arrow-clockwise-up-right";
+            break;
+          case "arrow-clockwise-up-right":
+            button.icon = "arrow-clockwise-down-right";
+            break;
+          case "arrow-clockwise-down-right":
+            button.icon = "arrow-clockwise-up-left";
+            break;
+        }
+      };
+    </script>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tooltip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IAEtB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,GAAG;gBACnB,eAAe,CAAC,MAAM;gBACtB,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,KAAK;gBACrB,eAAe,CAAC,QAAQ;gBACxB,eAAe,CAAC,SAAS;gBACzB,eAAe,CAAC,WAAW;gBAC3B,eAAe,CAAC,YAAY;aAC7B;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,4BAA4B,EAAE,sBAAsB,EAAE;KACvD;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,4BAA4B,EAAE,wBAAwB;QACtD,UAAU,EAAE,eAAe,CAAC,IAAI;KACjC;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;oBAOJ,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;;6CAEoB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;GAkB5E;CACc,CAAC;AAElB;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;qBAOH,IAAI,CAAC,QAAQ;iBACjB,IAAI,CAAC,IAAI;;;6CAGmB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkC5E;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTooltip} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTooltipStoriesArgs = ZTooltip & CSSVarsArguments<\"z-tooltip-theme--surface\">;\n\n/**\n * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`\n * On the following Story, the \"position\" prop can be set only for the original positions of the `z-tooltip` by design.\n */\nconst StoryMeta = {\n  title: \"ZTooltip\",\n  component: \"z-tooltip\",\n\n  argTypes: {\n    \"position\": {\n      options: [\n        PopoverPosition.AUTO,\n        PopoverPosition.TOP,\n        PopoverPosition.BOTTOM,\n        PopoverPosition.LEFT,\n        PopoverPosition.RIGHT,\n        PopoverPosition.TOP_LEFT,\n        PopoverPosition.TOP_RIGHT,\n        PopoverPosition.BOTTOM_LEFT,\n        PopoverPosition.BOTTOM_RIGHT,\n      ],\n      control: {\n        type: \"select\",\n      },\n    },\n    \"--z-tooltip-theme--surface\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"dark\": false,\n    \"--z-tooltip-theme--surface\": \"var(--color-surface01)\",\n    \"position\": PopoverPosition.LEFT,\n  },\n} satisfies Meta<ZTooltipStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTooltipStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"trigger\"\n        icon=\"plus-filled\"\n      ></z-button>\n      <z-tooltip\n        .position=${args.position}\n        .dark=${args.dark}\n        bind-to=\"#trigger\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <div class=\"container\">\n          <z-button>Open</z-button>\n          <z-button>Save as</z-button>\n          <z-button>Share</z-button>\n        </div>\n      </z-tooltip>\n    </div>\n    <script>\n      document.querySelector(\"#trigger\").addEventListener(\"click\", () => {\n        if (document.querySelector(\"z-tooltip\").open) {\n          document.querySelector(\"z-tooltip\").open = false;\n        } else {\n          document.querySelector(\"z-tooltip\").open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n\n/**\n * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.\n * In the Story below, the tooltip is opened hovering the button.\n */\nexport const AutocloseOff = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"info-button\"\n        icon=\"arrow-clockwise-up-left\"\n      ></z-button>\n      <z-tooltip\n        .position=\"${args.position}\"\n        .dark=\"${args.dark}\"\n        closable=\"false\"\n        bind-to=\"#info-button\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <span class=\"tooltip-info-text\">Clicca per fare girare la freccia</span>\n      </z-tooltip>\n    </div>\n    <script>\n      button = document.querySelector(\"#info-button\");\n      tooltip = document.querySelector(\"z-tooltip\");\n      button.addEventListener(\"mouseover\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"focusin\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"mouseout\", () => {\n        tooltip.open = false;\n      });\n      button.addEventListener(\"focusout\", () => {\n        tooltip.open = false;\n      });\n      button.onclick = () => {\n        switch (button.icon) {\n          case \"arrow-clockwise-up-left\":\n            button.icon = \"arrow-clockwise-up-right\";\n            break;\n          case \"arrow-clockwise-up-right\":\n            button.icon = \"arrow-clockwise-down-right\";\n            break;\n          case \"arrow-clockwise-down-right\":\n            button.icon = \"arrow-clockwise-up-left\";\n            break;\n        }\n      };\n    </script>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-visually-hidden/index.js

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

package/dist/collection/components/z-visually-hidden/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-visually-hidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO3C,MAAM,OAAO,eAAe;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO3C,MAAM,OAAO,eAAe;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-visually-hidden/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yCAAyC;SAChD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZVisuallyHidden} from \"./index\";\n\ndescribe(\"Suite test ZVisuallyHidden\", () => {\n  it(\"Test render ZVisuallyHidden vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZVisuallyHidden],\n      html: `<z-visually-hidden></z-visually-hidden>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-visually-hidden>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </z-visually-hidden>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yCAAyC;SAChD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZVisuallyHidden} from \"./index\";\n\ndescribe(\"Suite test ZVisuallyHidden\", () => {\n  it(\"Test render ZVisuallyHidden vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZVisuallyHidden],\n      html: `<z-visually-hidden></z-visually-hidden>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-visually-hidden>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </z-visually-hidden>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-visually-hidden/index.stories.js

@@ -0,0 +1,28 @@
+import { html } from "lit";
+import "./index";
+export default {
+    title: "ZVisuallyHidden",
+    component: "z-visually-hidden",
+};
+export const Default = {
+    render: () => html `<h2 class="heading-2">ZVisuallyHidden</h2>
+      <span
+        >This component visually hide an element while still allowing it to be exposed to assistive technologies (such
+        as screen readers).</span
+      ><span>
+        There are real world situations where visually hiding content may be appropriate:
+        <ul>
+          <li>Hide visually the text of <code>ZAriaAlert</code></li>
+          <li>
+            Take advantage of the behavior and semantics of a native element like a checkbox or radio button, but
+            replace it with a custom styled element visually.
+          </li>
+          <li>
+            Hide visually an <code>h1</code> because could be redundant for a sighted user but could be usefull for
+            navigation through ScreenReader rotor
+          </li>
+        </ul>
+      </span>
+      <z-visually-hidden><div>Hello</div></z-visually-hidden>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;8DAkBsD;CAC7D,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n  title: \"ZVisuallyHidden\",\n  component: \"z-visually-hidden\",\n};\n\nexport const Default = {\n  render: () =>\n    html`<h2 class=\"heading-2\">ZVisuallyHidden</h2>\n      <span\n        >This component visually hide an element while still allowing it to be exposed to assistive technologies (such\n        as screen readers).</span\n      ><span>\n        There are real world situations where visually hiding content may be appropriate:\n        <ul>\n          <li>Hide visually the text of <code>ZAriaAlert</code></li>\n          <li>\n            Take advantage of the behavior and semantics of a native element like a checkbox or radio button, but\n            replace it with a custom styled element visually.\n          </li>\n          <li>\n            Hide visually an <code>h1</code> because could be redundant for a sighted user but could be usefull for\n            navigation through ScreenReader rotor\n          </li>\n        </ul>\n      </span>\n      <z-visually-hidden><div>Hello</div></z-visually-hidden>`,\n};\n"]}

package/dist/collection/constants/breakpoints.js

@@ -1,5 +1,5 @@
 const mobileBreakpoint = 767;
 const tabletBreakpoint = 1052;
 const desktopBreakpoint = 1365;
-export { mobileBreakpoint, tabletBreakpoint, desktopBreakpoint };
+export { desktopBreakpoint, mobileBreakpoint, tabletBreakpoint };
 //# sourceMappingURL=breakpoints.js.map

package/dist/collection/constants/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/constants/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAE,gBAAgB,EAAE,iBAAiB,EAAC,CAAC","sourcesContent":["const mobileBreakpoint = 767;\nconst tabletBreakpoint = 1052;\nconst desktopBreakpoint = 1365;\n\nexport {mobileBreakpoint, tabletBreakpoint, desktopBreakpoint};\n"]}
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/constants/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAE/B,OAAO,EAAC,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["const mobileBreakpoint = 767;\nconst tabletBreakpoint = 1052;\nconst desktopBreakpoint = 1365;\n\nexport {desktopBreakpoint, mobileBreakpoint, tabletBreakpoint};\n"]}

package/dist/collection/constants/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/constants/icons.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG;IACZ,YAAY,EAAE,UAAU;IACxB,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,eAAe;CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["const icons = {\n  iconuserlogo: \"user.png\",\n  iconarrowup: \"arrowUp.png\",\n  iconarrowdown: \"arrowDown.png\",\n};\n\nexport default icons;\n"]}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/constants/icons.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG;IACZ,YAAY,EAAE,UAAU;IACxB,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,eAAe;CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["const icons = {\n  iconuserlogo: \"user.png\",\n  iconarrowup: \"arrowUp.png\",\n  iconarrowdown: \"arrowDown.png\",\n};\n\nexport default icons;\n"]}