@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTool} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"../z-color-picker/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZTool\",\n  component: \"z-tool\",\n  argTypes: {\n    tooltipPosition: {\n      options: Object.values(PopoverPosition),\n      control: {type: \"select\"},\n    },\n    indicatorColor: {\n      control: \"color\",\n    },\n    icon: {\n      options: Object.keys(ICONS),\n      control: {type: \"select\"},\n    },\n  },\n  args: {\n    active: false,\n    disabled: false,\n    htmlAriaLabel: \"Impostazioni\",\n    icon: \"gear\",\n    indicatorColor: \"\",\n    tooltip: \"Impostazioni\",\n    tooltipPosition: PopoverPosition.TOP,\n  },\n} satisfies Meta<ZTool>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTool>;\n\nexport const Default = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Active = {\n  args: {\n    active: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const WithToolbar = {\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n          <z-tool\n            icon=\"gear\"\n            tooltip=\"Impostazioni\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"download\"\n            tooltip=\"Scarica\"\n          ></z-tool>\n          <z-tool\n            icon=\"upload\"\n            tooltip=\"Carica\"\n          ></z-tool>\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool> </z-toolbar\n      ></z-tool>\n    </div>`,\n} satisfies Story;\n\nexport const ColorPicker = {\n  args: {\n    icon: \"bg-color\",\n    indicatorColor: \"#ff0000\",\n    tooltip: \"Colore di sfondo\",\n  },\n  parameters: {\n    docs: {\n      story: {\n        inline: false,\n        height: \"300px\",\n      },\n    },\n  },\n  render: (args) =>\n    html`<div class=\"tool-container\">\n      <z-tool\n        icon=${args.icon}\n        tooltip=${args.tooltip}\n        tooltip-position=${args.tooltipPosition}\n        .indicatorColor=${args.indicatorColor}\n        html-aria-label=${args.htmlAriaLabel}\n        ?active=${args.active}\n        ?disabled=${args.disabled}\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n    </div>`,\n} satisfies Story;\n"]}

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

@@ -10,10 +10,10 @@ import { KeyboardCode } from "../../beans";
  */
 export class ZToolbar {
     constructor() {
-        /** Index of the currently focusable item (roving tabindex). */
-        this.currentFocusIndex = 0;
         /** List of focusable tool elements. */
         this.toolItems = [];
+        this.htmlAriaLabel = undefined;
+        this.currentFocusIndex = 0;
     }
     componentDidLoad() {
         this.collectToolItems();
@@ -133,7 +133,7 @@ export class ZToolbar {
         }
     }
     render() {
-        return (h(Host, { key: '3d5cb3fe384ef699b96ef64dbe86e6fd1d3d3e83', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '6f5103c87e99b23a0f3c22f0112c24e14b9fccfa', onSlotchange: () => {
+        return (h(Host, { key: '5e00c2233560e5050ede29f987b8eb42e2af5935', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '9ea69fc40ffaa25d900ad80dc9ca42b8ddcb1140', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));
@@ -166,10 +166,8 @@ export class ZToolbar {
                     "tags": [],
                     "text": "Accessible label for the toolbar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-label"
+                "attribute": "html-aria-label",
+                "reflect": false
             }
         };
     }
@@ -207,3 +205,4 @@ export class ZToolbar {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n    mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n  }\n\n  /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  /**\n   * Update the `tabindex` of all children tools based on the current focus index,\n   * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n   */\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (!tool) {\n      return;\n    }\n\n    this.currentFocusIndex = index;\n    if (!tool.disabled) {\n      tool.setFocus();\n      this.updateTabIndexes();\n\n      return;\n    }\n\n    if (fallback === \"next\") {\n      this.focusNextTool();\n    } else {\n      this.focusPreviousTool();\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  /**\n   * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n   * to prevent multiple submenus from being open at the same time.\n   */\n  @Listen(\"toggleSubmenu\")\n  closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n    if (!targetTool || !this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool && tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  /**\n   * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n   * to prevent multiple tooltips from being open at the same time.\n   */\n  @Listen(\"toggleTooltip\")\n  closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = event.target;\n    if (!this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool) {\n        tool.closeTooltip();\n      }\n    });\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n    }\n  }\n\n  /**\n   * When focus enters the toolbar, update the current focus index to match the focused tool,\n   * so that roving tabindex is in sync with actual focus.\n   */\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n    const index = this.toolItems.indexOf(toolElement);\n    if (index !== -1 && index !== this.currentFocusIndex) {\n      this.currentFocusIndex = index;\n      this.updateTabIndexes();\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -315,3 +315,4 @@ export const MultilineMobile = {
     </z-toolbar>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;GAQG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,aAAa,EAAE,oBAAoB;KACpC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;iBAEO,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAA4B,CAAC;YACpF,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC7B,CAAC;QACH,CAAC;;UAEC,KAAK,EAAE;aACJ;KACV;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;GAchD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,qBAAqB,EAAE,GAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,eAAe,EAAE,QAAQ;SAC1B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGA,IAAI,CAAC,aAAa;oCACN,IAAI,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF5D;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZToolbarStoriesArgs = ZToolbar & CSSVarsArguments<\"--z-toolbar-columns\">;\n\n/**\n * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * ### Active state\n * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.\n * ### Visual grouping with `z-divider`\n * Use `<z-divider orientation=\"vertical\">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.\n * ### Mobile multiline layout with `--z-toolbar-columns`\n * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.\n */\nconst StoryMeta = {\n  title: \"ZToolbar\",\n  component: \"z-toolbar\",\n  args: {\n    htmlAriaLabel: \"Toolbar principale\",\n  },\n  decorators: [\n    (story) =>\n      html`<div\n        class=\"toolbar-container\"\n        @click=${(e: Event) => {\n          const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n          if (tool && !tool.disabled && !tool.children.length) {\n            tool.active = !tool.active;\n          }\n        }}\n      >\n        ${story()}\n      </div>`,\n  ],\n} satisfies Meta<ZToolbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbarStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDividers = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-down\"\n        tooltip=\"Giù\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n      <z-tool\n        icon=\"copy\"\n        tooltip=\"Copia\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithNestedToolbar = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"bg-color\"\n        tooltip=\"Scegli un colore\"\n      >\n        <z-color-picker></z-color-picker>\n      </z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Apri sotto-toolbar\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"bg-color\"\n            tooltip=\"Scegli un colore\"\n          >\n            <z-color-picker></z-color-picker>\n          </z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-tool\n        icon=\"chevron-up\"\n        tooltip=\"Su\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-divider orientation=\"vertical\"></z-divider>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithDisabledTool = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const WithActiveTool = {\n  render: (args) => html`\n    <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n        active\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n\nexport const MultilineMobile = {\n  args: {\n    \"--z-toolbar-columns\": \"4\",\n  },\n  parameters: {\n    viewport: {\n      defaultViewport: \"mobile\",\n    },\n  },\n  render: (args) => html`\n    <z-toolbar\n      class=\"multiline-container\"\n      html-aria-label=${args.htmlAriaLabel}\n      style=\"--z-toolbar-columns: ${args[\"--z-toolbar-columns\"]};\"\n    >\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica\"\n      ></z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-up\"\n            tooltip=\"Su\"\n          ></z-tool>\n          <z-tool\n            icon=\"chevron-down\"\n            tooltip=\"Giù\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-divider orientation=\"vertical\"></z-divider>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"download\"\n        tooltip=\"Scarica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"plus\"\n        tooltip=\"Aggiungi\"\n      >\n        <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n          <z-tool\n            icon=\"copy\"\n            tooltip=\"Copia\"\n          ></z-tool>\n          <z-tool\n            icon=\"edit\"\n            tooltip=\"Modifica\"\n          ></z-tool>\n        </z-toolbar>\n      </z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"copy\"\n        tooltip=\"Copia 2\"\n      ></z-tool>\n      <z-tool\n        icon=\"gear\"\n        tooltip=\"Impostazioni 3\"\n        disabled\n      ></z-tool>\n      <z-tool\n        icon=\"upload\"\n        tooltip=\"Carica 3\"\n      ></z-tool>\n    </z-toolbar>\n  `,\n} satisfies Story;\n"]}

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

@@ -10,26 +10,17 @@ import { PopoverPosition } from "../../beans";
  */
 export class ZTooltip {
     constructor() {
-        /** Tooltip position. */
         this.position = PopoverPosition.AUTO;
-        /** Enable tooltip dark mode. */
         this.dark = false;
-        /**
-         * The open state of the tooltip.
-         */
         this.open = false;
-        /**
-         * Reflects `closable` prop of the popover.
-         * "If true, the popover can be closed by clicking outside of it or pressing the escape key.
-         * Otherwise, it will be closed only programmatically (by setting `open` to `false`)."
-         */
+        this.bindTo = undefined;
         this.closable = true;
     }
     onPopoverOpenChange() {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'b08b53e3dc8e8c44ec1354e1a19d071bdb5dd3cb', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '45d59d5cf4dd196c2704511b9dcf0fa6c960dbb7' })));
+        return (h("z-popover", { key: 'cbfcd9d92fdb27c998b9293aea1520993bf6cc1a', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '9638b5e67aba8472eea8894b1b39bf1aa5f2986e' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +46,7 @@ export class ZTooltip {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition",
-                            "referenceLocation": "PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition"
                         }
                     }
                 },
@@ -66,10 +56,8 @@ export class ZTooltip {
                     "tags": [],
                     "text": "Tooltip position."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "position",
+                "reflect": true,
                 "defaultValue": "PopoverPosition.AUTO"
             },
             "dark": {
@@ -86,10 +74,8 @@ export class ZTooltip {
                     "tags": [],
                     "text": "Enable tooltip dark mode."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "dark",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
@@ -106,10 +92,8 @@ export class ZTooltip {
                     "tags": [],
                     "text": "The open state of the tooltip."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "open",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "bindTo": {
@@ -131,10 +115,8 @@ export class ZTooltip {
                     "tags": [],
                     "text": "The selector or the element bound with the tooltip."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "bind-to"
+                "attribute": "bind-to",
+                "reflect": false
             },
             "closable": {
                 "type": "boolean",
@@ -150,10 +132,8 @@ export class ZTooltip {
                     "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`).\""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "closable",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -186,3 +166,4 @@ export class ZTooltip {
             }];
     }
 }
+//# 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,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAE5C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAYf,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,QACT,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAE3D,8DAAa,CACH,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, 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  /**\n   * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n   * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n   */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\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        onOpenChange={(event) => this.openChange.emit(event.detail)}\n      >\n        <slot></slot>\n      </z-popover>\n    );\n  }\n}\n"]}

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

@@ -120,3 +120,4 @@ export const AutocloseOff = {
     </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: '7ddc72b3dc926a0205188bf75d5e42c15f913771' });
+        return h("slot", { key: 'b76451842cf32ab957ee81e9b689e94e35256524' });
     }
     static get is() { return "z-visually-hidden"; }
     static get encapsulation() { return "shadow"; }
@@ -16,3 +16,4 @@ export class ZVisuallyHidden {
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

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

@@ -25,3 +25,4 @@ export const Default = {
       </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

@@ -5,3 +5,4 @@ export var Breakpoints;
     Breakpoints[Breakpoints["TABLET"] = 1151] = "TABLET";
     Breakpoints[Breakpoints["DESKTOP"] = 1365] = "DESKTOP";
 })(Breakpoints || (Breakpoints = {}));
+//# sourceMappingURL=breakpoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/constants/breakpoints.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,oDAAa,CAAA;IACb,sDAAc,CAAA;AAChB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB","sourcesContent":["/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */\nexport enum Breakpoints {\n  MOBILE = 767,\n  TABLET = 1151,\n  DESKTOP = 1365,\n}\n"]}

package/dist/collection/constants/icons.js

@@ -4,3 +4,4 @@ const icons = {
     iconarrowdown: "arrowDown.png",
 };
 export default icons;
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +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"]}

package/dist/collection/constants/iconset.js

@@ -1008,3 +1008,4 @@ export const COLOR_INDICATOR_ICONS = [
     "picker-color-filled",
     "stroke-color-filled",
 ];
+//# sourceMappingURL=iconset.js.map