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

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

@@ -0,0 +1,262 @@
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { PopoverPosition, SortDirection, VisibilityCondition } from "../../../beans";
+import "../../z-button/index";
+import "./index";
+import "./index.stories.css";
+/**
+ * ## Accessibility
+ *
+ * The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.
+ * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.
+ * The ARIA attributes used are the following:
+ * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled
+ * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+ * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.
+ * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.
+ */
+const StoryMeta = {
+    title: "ZTable",
+    component: "z-table",
+    args: {
+        "bordered": true,
+        "--z-table--cells-padding": "16px",
+    },
+};
+export default StoryMeta;
+const cellsTemplate = (count = 1) => html `${repeat([...new Array(count)], () => html `<z-td>Contenuto cella</z-td>`)}`;
+export const Default = {
+    render: (args) => html `<z-table
+      class="z-table-demo"
+      .bordered=${args.bordered}
+      style=${styleMap({
+        "--z-table--cells-padding": args["--z-table--cells-padding"],
+    })}
+    >
+      <z-thead>
+        <z-tr>${repeat([...new Array(8)], () => html `<z-th>Titolo colonna</z-th>`)}</z-tr>
+      </z-thead>
+      <z-tbody>${repeat([...new Array(5)], () => html `<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>
+      <z-tfoot>
+        <z-tr>
+          <z-td colspan="8">Table footer</z-td>
+        </z-tr>
+      </z-tfoot>
+    </z-table>`,
+};
+/**
+ * Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.
+ * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a "prevent-expand" class on that item, in order to prevent unwanted row expansions.
+ */
+export const ExpandableRows = {
+    render: (args) => html `<z-table
+      class="z-table-demo"
+      .bordered=${args.bordered}
+      style=${styleMap({
+        "--z-table--cells-padding": args["--z-table--cells-padding"],
+    })}
+    >
+      <z-thead>
+        <z-tr>${repeat([...new Array(8)], (_, index) => html `<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>
+      </z-thead>
+      <z-tbody>
+        <z-tr>
+          <z-td>Contenuto cella</z-td>
+          <z-td>Contenuto cella</z-td>
+          <z-td show-menu>
+            <span>Contenuto cella con menu</span>
+            <div slot="contextual-menu">Contenuto del popover</div></z-td
+          >
+          ${cellsTemplate(5)}
+        </z-tr>
+        <z-tr>${repeat([...new Array(8)], () => html `<z-td>Contenuto cella</z-td>`)}</z-tr>
+        <z-tr expandable>
+          <z-td>Contenuto cella</z-td>
+          <z-td>Contenuto cella</z-td>
+          <z-td>
+            <span>Contenuto cella</span>
+            <z-button
+              class="prevent-expand"
+              onclick="alert('button clicked without expanding the row')"
+              icon="plus"
+              size="x-small"
+            ></z-button
+          ></z-td>
+          ${cellsTemplate(5)}
+          <z-td>Contenuto espanso</z-td>
+        </z-tr>
+        <z-tr>${cellsTemplate(8)}</z-tr>
+        <z-tr expandable>
+          <z-td>Contenuto cella</z-td>
+          <z-td show-menu="always">
+            <span>Contenuto cella con menu</span>
+            <div slot="contextual-menu">Contenuto del popover</div></z-td
+          >
+          ${cellsTemplate(6)}
+          <z-td>Contenuto espanso</z-td>
+        </z-tr>
+      </z-tbody>
+      <z-tfoot>
+        <z-tr>
+          <z-td colspan="8">Table footer</z-td>
+        </z-tr>
+      </z-tfoot>
+    </z-table>`,
+};
+/**
+ * To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.
+ * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.
+ */
+export const Sticky = {
+    args: {
+        stickyHeader: true,
+        stickyFooter: true,
+        stickFirstColumn: true,
+    },
+    render: (args) => html `<z-table
+      class="z-table-demo"
+      .bordered=${args.bordered}
+      style=${styleMap({
+        "--z-table--cells-padding": args["--z-table--cells-padding"],
+        "height": "400px",
+    })}
+    >
+      <z-thead .sticky=${args.stickyHeader}>
+        <z-tr>
+          <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>
+          ${repeat([...new Array(7)], (_, index) => html `<z-th>Colonna ${index + 2}</z-th>`)}
+        </z-tr>
+      </z-thead>
+      <z-tbody>
+        <z-tr>
+          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
+          <z-td>Contenuto cella</z-td>
+          <z-td>Contenuto cella</z-td>
+          <z-td show-menu>
+            <span>Contenuto cella con menu</span>
+            <div slot="contextual-menu">Contenuto del popover</div></z-td
+          >
+          ${cellsTemplate(4)}
+        </z-tr>
+        ${repeat([...new Array(5)], () => html `<z-tr>
+              <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
+              ${cellsTemplate(7)}
+            </z-tr>`)}
+        <z-tr expandable>
+          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
+          ${cellsTemplate(6)}
+          <z-td>
+            <span>Contenuto cella</span>
+            <z-button
+              class="prevent-expand"
+              onclick="alert('button clicked')"
+              icon="plus"
+              size="x-small"
+            ></z-button
+          ></z-td>
+          <z-td>Contenuto espanso</z-td>
+        </z-tr>
+        <z-tr expandable>
+          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>
+          ${cellsTemplate(7)}
+          <z-td>Contenuto espanso</z-td>
+        </z-tr>
+      </z-tbody>
+      <z-tfoot .sticky=${args.stickyFooter}>
+        <z-tr>
+          <z-td colspan="8">Table footer</z-td>
+        </z-tr>
+      </z-tfoot>
+    </z-table>`,
+};
+/**
+ * Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.
+ * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.
+ */
+export const CellsWithContextualMenu = {
+    argTypes: {
+        showMenu: {
+            control: {
+                type: "inline-radio",
+                labels: {
+                    null: "hidden",
+                },
+            },
+            popoverPosition: {
+                options: Object.values(PopoverPosition),
+                control: {
+                    type: "select",
+                },
+            },
+            options: [null, ...Object.values(VisibilityCondition)],
+        },
+    },
+    args: {
+        showMenu: VisibilityCondition.HOVER,
+        popoverPosition: PopoverPosition.AUTO,
+    },
+    render: (args) => html `<z-table
+      class="z-table-demo"
+      .bordered=${args.bordered}
+      style=${styleMap({
+        "--z-table--cells-padding": args["--z-table--cells-padding"],
+    })}
+    >
+      <z-thead>
+        <z-tr>
+          <z-th>Colonna 1</z-th>
+          <z-th
+            .showMenu=${args.showMenu}
+            .popoverPosition=${args.popoverPosition}
+          >
+            Heading con menu
+            <div slot="contextual-menu">Contenuto del popover</div>
+          </z-th>
+          <z-th>Colonna 2</z-th>
+        </z-tr>
+      </z-thead>
+      <z-tbody>
+        ${repeat([...new Array(3)], () => html `<z-tr>
+              <z-td .showMenu=${args.showMenu}>
+                <span>Contenuto cella con menu</span>
+                <div slot="contextual-menu">Contenuto del popover</div>
+              </z-td>
+              <z-td>Contenuto cella</z-td>
+              <z-td .showMenu=${args.showMenu}>
+                <span>Contenuto cella con menu</span>
+                <div slot="contextual-menu">Contenuto del popover</div>
+              </z-td>
+            </z-tr>`)}
+      </z-tbody>
+    </z-table>`,
+};
+/**
+ * Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.
+ * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
+ */
+export const SortAction = {
+    render: (args) => html `<z-table
+      class="z-table-demo"
+      .bordered=${args.bordered}
+      style=${styleMap({
+        "--z-table--cells-padding": args["--z-table--cells-padding"],
+    })}
+    >
+      <z-thead>
+        <z-tr>
+          <z-th>Colonna 1</z-th>
+          <z-th
+            .sortDirection=${SortDirection.ASC}
+            .showMenu=${VisibilityCondition.HOVER}
+          >
+            Colonna 2 con menu e sorting
+            <div slot="contextual-menu">Contenuto del popover</div>
+          </z-th>
+          <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>
+        </z-tr>
+      </z-thead>
+      <z-tbody>${repeat([...new Array(3)], () => html `<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>
+    </z-table>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/**\n * ## Accessibility\n *\n * The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n */\nconst StoryMeta = {\n  title: \"ZTable\",\n  component: \"z-table\",\n  args: {\n    \"bordered\": true,\n    \"--z-table--cells-padding\": \"16px\",\n  },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n  html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-table\n      class=\"z-table-demo\"\n      .bordered=${args.bordered}\n      style=${styleMap({\n        \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n      })}\n    >\n      <z-thead>\n        <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n      </z-thead>\n      <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n      <z-tfoot>\n        <z-tr>\n          <z-td colspan=\"8\">Table footer</z-td>\n        </z-tr>\n      </z-tfoot>\n    </z-table>`,\n};\n\n/**\n * Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n */\nexport const ExpandableRows = {\n  render: (args) =>\n    html`<z-table\n      class=\"z-table-demo\"\n      .bordered=${args.bordered}\n      style=${styleMap({\n        \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n      })}\n    >\n      <z-thead>\n        <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n      </z-thead>\n      <z-tbody>\n        <z-tr>\n          <z-td>Contenuto cella</z-td>\n          <z-td>Contenuto cella</z-td>\n          <z-td show-menu>\n            <span>Contenuto cella con menu</span>\n            <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n          >\n          ${cellsTemplate(5)}\n        </z-tr>\n        <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n        <z-tr expandable>\n          <z-td>Contenuto cella</z-td>\n          <z-td>Contenuto cella</z-td>\n          <z-td>\n            <span>Contenuto cella</span>\n            <z-button\n              class=\"prevent-expand\"\n              onclick=\"alert('button clicked without expanding the row')\"\n              icon=\"plus\"\n              size=\"x-small\"\n            ></z-button\n          ></z-td>\n          ${cellsTemplate(5)}\n          <z-td>Contenuto espanso</z-td>\n        </z-tr>\n        <z-tr>${cellsTemplate(8)}</z-tr>\n        <z-tr expandable>\n          <z-td>Contenuto cella</z-td>\n          <z-td show-menu=\"always\">\n            <span>Contenuto cella con menu</span>\n            <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n          >\n          ${cellsTemplate(6)}\n          <z-td>Contenuto espanso</z-td>\n        </z-tr>\n      </z-tbody>\n      <z-tfoot>\n        <z-tr>\n          <z-td colspan=\"8\">Table footer</z-td>\n        </z-tr>\n      </z-tfoot>\n    </z-table>`,\n};\n\n/**\n * To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n */\nexport const Sticky = {\n  args: {\n    stickyHeader: true,\n    stickyFooter: true,\n    stickFirstColumn: true,\n  },\n  render: (args) =>\n    html`<z-table\n      class=\"z-table-demo\"\n      .bordered=${args.bordered}\n      style=${styleMap({\n        \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n        \"height\": \"400px\",\n      })}\n    >\n      <z-thead .sticky=${args.stickyHeader}>\n        <z-tr>\n          <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n          ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n        </z-tr>\n      </z-thead>\n      <z-tbody>\n        <z-tr>\n          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n          <z-td>Contenuto cella</z-td>\n          <z-td>Contenuto cella</z-td>\n          <z-td show-menu>\n            <span>Contenuto cella con menu</span>\n            <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n          >\n          ${cellsTemplate(4)}\n        </z-tr>\n        ${repeat(\n          [...new Array(5)],\n          () =>\n            html`<z-tr>\n              <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n              ${cellsTemplate(7)}\n            </z-tr>`\n        )}\n        <z-tr expandable>\n          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n          ${cellsTemplate(6)}\n          <z-td>\n            <span>Contenuto cella</span>\n            <z-button\n              class=\"prevent-expand\"\n              onclick=\"alert('button clicked')\"\n              icon=\"plus\"\n              size=\"x-small\"\n            ></z-button\n          ></z-td>\n          <z-td>Contenuto espanso</z-td>\n        </z-tr>\n        <z-tr expandable>\n          <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n          ${cellsTemplate(7)}\n          <z-td>Contenuto espanso</z-td>\n        </z-tr>\n      </z-tbody>\n      <z-tfoot .sticky=${args.stickyFooter}>\n        <z-tr>\n          <z-td colspan=\"8\">Table footer</z-td>\n        </z-tr>\n      </z-tfoot>\n    </z-table>`,\n};\n\n/**\n * Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n */\nexport const CellsWithContextualMenu = {\n  argTypes: {\n    showMenu: {\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          null: \"hidden\",\n        },\n      },\n      popoverPosition: {\n        options: Object.values(PopoverPosition),\n        control: {\n          type: \"select\",\n        },\n      },\n      options: [null, ...Object.values(VisibilityCondition)],\n    },\n  },\n  args: {\n    showMenu: VisibilityCondition.HOVER,\n    popoverPosition: PopoverPosition.AUTO,\n  },\n  render: (args) =>\n    html`<z-table\n      class=\"z-table-demo\"\n      .bordered=${args.bordered}\n      style=${styleMap({\n        \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n      })}\n    >\n      <z-thead>\n        <z-tr>\n          <z-th>Colonna 1</z-th>\n          <z-th\n            .showMenu=${args.showMenu}\n            .popoverPosition=${args.popoverPosition}\n          >\n            Heading con menu\n            <div slot=\"contextual-menu\">Contenuto del popover</div>\n          </z-th>\n          <z-th>Colonna 2</z-th>\n        </z-tr>\n      </z-thead>\n      <z-tbody>\n        ${repeat(\n          [...new Array(3)],\n          () =>\n            html`<z-tr>\n              <z-td .showMenu=${args.showMenu}>\n                <span>Contenuto cella con menu</span>\n                <div slot=\"contextual-menu\">Contenuto del popover</div>\n              </z-td>\n              <z-td>Contenuto cella</z-td>\n              <z-td .showMenu=${args.showMenu}>\n                <span>Contenuto cella con menu</span>\n                <div slot=\"contextual-menu\">Contenuto del popover</div>\n              </z-td>\n            </z-tr>`\n        )}\n      </z-tbody>\n    </z-table>`,\n};\n\n/**\n * Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n  render: (args) =>\n    html`<z-table\n      class=\"z-table-demo\"\n      .bordered=${args.bordered}\n      style=${styleMap({\n        \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n      })}\n    >\n      <z-thead>\n        <z-tr>\n          <z-th>Colonna 1</z-th>\n          <z-th\n            .sortDirection=${SortDirection.ASC}\n            .showMenu=${VisibilityCondition.HOVER}\n          >\n            Colonna 2 con menu e sorting\n            <div slot=\"contextual-menu\">Contenuto del popover</div>\n          </z-th>\n          <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>\n        </z-tr>\n      </z-thead>\n      <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n    </z-table>`,\n};\n"]}

package/dist/collection/components/table/z-tbody/index.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '5053f27544fc018342c190f6365808a7dd5680bd', role: "rowgroup" }, h("slot", { key: '14a7c9dfd3e65dbb6fe1c36012de193e9b734a68' })));
+        return (h(Host, { key: '82690ddf3bdd8b742cadcf45a75778892d15c5bf', role: "rowgroup" }, h("slot", { key: '6b1a45b35318f6df0966ee67aa60f33aa32c5751' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tbody/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-tfoot/index.js

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '441a3e0656da274193c4a12681b9e9d641690982', role: "rowgroup" }, h("slot", { key: '5e80207cbf1238b2141fcd657cb10fc18be7bccb' })));
+        return (h(Host, { key: 'c56c6c8f9f3eda99f7eaed147ef2df8c99d43cda', role: "rowgroup" }, h("slot", { key: '03eeb74397f395723a8a649bb7213ac9fdbcf4f0' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-thead/index.js

@@ -8,7 +8,7 @@ export class ZThead {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'fd1e0dced377fcfcd3b531c063ac36937eaf6904', role: "rowgroup" }, h("slot", { key: '1d75abf2f9b0f1c109eec083ebfaf3e07de81dca' })));
+        return (h(Host, { key: 'e1e45a7e6e5325a7c0b82cf490d7896f233b35fa', role: "rowgroup" }, h("slot", { key: '8e2f327fc3e2721b1a7755024b9eb43ab87ac2d3' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-tr/index.js

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '23e6468561e474d51304677536e0d731fa09cfbf', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'e716dd6247818a285aacd88109964cf7b063b317', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '0de8d962ba7e9c72aa614c76052bab607b83a04e', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'a7834f72abcf18e74ff16ff9dbbcb4e987f673df', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'badaec159c7abf449da9c7015fb2fa240ce14377', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '6e312e5e8f907d05968b636f6368cda6397214eb', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'e054cb205c4a81e1e88509300976133c21f27d0f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '95b75f93a1c27d6245e8993dcdfeef3f614c1843', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,+BACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,cAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ControlSize, AccordionVariant } from "../../beans";
+import { AccordionVariant, ControlSize } from "../../beans";
 /**
  * Accordion component.
  *
@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: '9b6381d6a29fe8ea16ecdcb38d1784c1cc3bcc80', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'bf02abfd586afbafabddf1d3e5d7de934722dea6', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '2fa466698c2f605dbe4eaac5cd48cd9af69448cc', class: "z-accordion-label" }, this.label), h("span", { key: '3cf6a1812413aa84f7ce106d5b81587d5e211cb2', class: "z-accordion-tags" }, h("slot", { key: '0a7109139d474427bf396960af79eae2e827c985', name: "tag" })), h("z-icon", { key: 'e2853db6bbd4947486fe3d95a5bc8d003c74299f', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
+        return (h("details", { key: '38787e09f78228eedda870ebd2380feae9f221ef', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '5eebc1fe756b6ef603bd0170fd53aa9548e02dec', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '741eab4038e866bc34259348e66d0115a55ad333', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'e82c28a47084aba4a031ce947ac22e73d9c0c26d', class: "z-accordion-label" }, this.label), h("span", { key: '20279a9c0935c533a909a124a1f87f266d5783a3', class: "z-accordion-tags" }, h("slot", { key: '697e5e1cfb5764da59ded7eec41a3e7a2edd56b4', name: "tag" })), h("z-icon", { key: '079968872230475ee1783077819387e205ebdf72', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '4377a46e29de0d5e079f1e8011b3e6e10bf1a876', class: "z-accordion-content", part: "content" }, h("slot", { key: 'e998671e6f42b524ab26d2ef71931acf5ed680b7' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,cACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,eAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Watch} from \"@stencil/core\";\nimport {ControlSize, AccordionVariant} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          <span class=\"z-accordion-tags\">\n            <slot name=\"tag\" />\n          </span>\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          <span class=\"z-accordion-tags\">\n            <slot name=\"tag\" />\n          </span>\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,165 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { AccordionVariant, ControlSize } from "../../beans";
+import { ICONS } from "../../constants/iconset";
+import { getColorTokenArgConfig } from "../../utils/storybook-utils";
+import "../z-tag/index";
+import "./index";
+const cssPropsArgs = {
+    "--z-accordion-bg": getColorTokenArgConfig(true),
+    "--z-accordion-label-color": getColorTokenArgConfig(true),
+    "--z-accordion-disabled-label-color": Object.assign(Object.assign({}, getColorTokenArgConfig(true)), { if: {
+            arg: "isDisabled",
+            truthy: true,
+        } }),
+    "--z-accordion-content-bg": getColorTokenArgConfig(true),
+    "--z-accordion-content-fg": getColorTokenArgConfig(true),
+    "--z-accordion-hover-color": getColorTokenArgConfig(true),
+    "--z-accordion-highlight-color": Object.assign(Object.assign({}, getColorTokenArgConfig(true)), { if: {
+            arg: "highlight",
+            truthy: true,
+        } }),
+};
+/**
+ * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.
+ */
+const StoryMeta = {
+    title: "ZAccordion",
+    component: "z-accordion",
+    argTypes: Object.assign(Object.assign({}, cssPropsArgs), { icon: {
+            options: [null, ...Object.keys(ICONS).sort()],
+            control: {
+                type: "select",
+                labels: {
+                    null: "—",
+                },
+            },
+        }, shadow: {
+            if: {
+                arg: "variant",
+                eq: AccordionVariant.BACKGROUND,
+            },
+        }, size: {
+            options: Object.values(ControlSize),
+            control: {
+                type: "inline-radio",
+            },
+        }, variant: {
+            options: Object.values(AccordionVariant),
+            control: {
+                type: "inline-radio",
+            },
+        } }),
+    args: {
+        "--z-accordion-bg": null,
+        "--z-accordion-label-color": null,
+        "--z-accordion-disabled-label-color": null,
+        "--z-accordion-content-bg": null,
+        "--z-accordion-content-fg": null,
+        "--z-accordion-hover-color": null,
+        "--z-accordion-highlight-color": null,
+        "--z-accordion-right-padding": "var(--space-unit)",
+        "--z-accordion-left-padding": "calc(var(--space-unit) * 2)",
+        "--z-accordion-label-font-weight": "var(--font-sb)",
+        "highlight": false,
+        "icon": null,
+        "isDisabled": false,
+        "label": "Text label",
+        "open": false,
+        "shadow": true,
+        "size": ControlSize.BIG,
+        "variant": AccordionVariant.DEFAULT,
+    },
+    render: (args) => html `<z-accordion
+      .highlight=${args.highlight}
+      .icon=${args.icon}
+      .isDisabled=${args.isDisabled}
+      .open=${args.open}
+      .shadow=${args.shadow}
+      label=${args.label}
+      size=${args.size}
+      variant=${args.variant}
+      style=${styleMap({
+        "--z-accordion-highlight-color": args["--z-accordion-highlight-color"],
+        "--z-accordion-bg": args["--z-accordion-bg"],
+        "--z-accordion-label-color": args["--z-accordion-label-color"],
+        "--z-accordion-disabled-label-color": args["--z-accordion-disabled-label-color"],
+        "--z-accordion-content-bg": args["--z-accordion-content-bg"],
+        "--z-accordion-content-fg": args["--z-accordion-content-fg"],
+        "--z-accordion-hover-color": args["--z-accordion-hover-color"],
+        "--z-accordion-right-padding": args["--z-accordion-right-padding"],
+        "--z-accordion-left-padding": args["--z-accordion-left-padding"],
+        "--z-accordion-label-font-weight": args["--z-accordion-label-font-weight"],
+    })}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,
+      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
+      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
+      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero
+      sum nescius esse utilitatem in historia, non modo voluptatem.
+    </z-accordion>`,
+};
+export default StoryMeta;
+export const Default = {};
+/**
+ * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.
+ */
+export const Stack = {
+    argTypes: {
+        "--z-accordion-highlight-color2": cssPropsArgs["--z-accordion-highlight-color"],
+        "--z-accordion-highlight-color3": cssPropsArgs["--z-accordion-highlight-color"],
+        "--z-accordion-highlight-color4": cssPropsArgs["--z-accordion-highlight-color"],
+    },
+    args: {
+        "--z-accordion-highlight-color2": null,
+        "--z-accordion-highlight-color3": null,
+        "--z-accordion-highlight-color4": null,
+    },
+    parameters: {
+        controls: {
+            exclude: ["open"],
+        },
+    },
+    render: (args) => html `${[
+        StoryMeta.render(args),
+        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color2"] })),
+        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color3"] })),
+        StoryMeta.render(Object.assign(Object.assign({}, args), { "--z-accordion-highlight-color": args["--z-accordion-highlight-color4"] })),
+    ]}`,
+};
+export const WithTags = {
+    render: (args) => html `
+    <z-accordion
+      .highlight=${args.highlight}
+      .icon=${args.icon}
+      .isDisabled=${args.isDisabled}
+      .open=${args.open}
+      .shadow=${args.shadow}
+      label=${args.label}
+      size=${args.size}
+      variant=${args.variant}
+      style=${styleMap({
+        "--z-accordion-highlight-color": args["--z-accordion-highlight-color"],
+        "--z-accordion-bg": args["--z-accordion-bg"],
+        "--z-accordion-label-color": args["--z-accordion-label-color"],
+        "--z-accordion-disabled-label-color": args["--z-accordion-disabled-label-color"],
+        "--z-accordion-content-bg": args["--z-accordion-content-bg"],
+        "--z-accordion-content-fg": args["--z-accordion-content-fg"],
+        "--z-accordion-hover-color": args["--z-accordion-hover-color"],
+        "--z-accordion-right-padding": args["--z-accordion-right-padding"],
+        "--z-accordion-left-padding": args["--z-accordion-left-padding"],
+        "--z-accordion-label-font-weight": args["--z-accordion-label-font-weight"],
+    })}
+    >
+      <z-tag slot="tag">Tag 1</z-tag>
+      <z-tag slot="tag">Tag 2</z-tag>
+      <z-tag slot="tag">Tag 3</z-tag>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,
+      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
+      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
+      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero
+      sum nescius esse utilitatem in historia, non modo voluptatem.
+    </z-accordion>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map