@zanichelli/albe-web-components 18.0.0 → 18.0.2-RC1

package/dist/esm/z-table.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import './index-dfd97928.js';
-import './index-8965837f.js';
-import './index-0ebe53c2.js';
-import './index-7ff7476c.js';
+import './index-15e7162a.js';
+import './index-b6570393.js';
+import './index-0a37a38c.js';
+import './index-9ebdda49.js';
 import './utils-c7062cf7.js';
 import './index-fe87283d.js';
 import './breakpoints-d148bfde.js';
-import './index-f87879d9.js';
-import './index-f75609c5.js';
+import './index-134918ad.js';
+import './index-b6e9fe98.js';
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
 const ZTableStyle0 = stylesCss;
@@ -41,7 +41,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '2bb52e3fc888013ff58b5f47d365b321857c9151', expandable: this.expandable }, h("div", { key: 'dbeadb1c170166590a3409fd2c8a9187ef1dad8e', class: "table", role: "table" }, h("slot", { key: 'eabc792f58c1653315c31d84a5611b940c4ee0ae' }))));
+        return (h(Host, { key: '5bcb85968089d367df090510834b66cc8331d4ce', expandable: this.expandable }, h("div", { key: 'f3276ded9f230fde14b7fdb43907d85fb07b6cae', class: "table", role: "table" }, h("slot", { key: 'c39a7e95dedabcc3b67a1f75c034dc9e99fe9c60' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/z-tbody.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tbody } from './index-dfd97928.js';
+export { Z as z_tbody } from './index-15e7162a.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm/z-td.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_td } from './index-f87879d9.js';
+export { Z as z_td } from './index-134918ad.js';
 import './index-c8ceadeb.js';
 import './index-fe87283d.js';
 

package/dist/esm/z-tfoot.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_tfoot } from './index-8965837f.js';
+export { Z as z_tfoot } from './index-b6570393.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm/z-th.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_th } from './index-f75609c5.js';
+export { Z as z_th } from './index-b6e9fe98.js';
 import './index-c8ceadeb.js';
 import './index-fe87283d.js';
 

package/dist/esm/z-thead.entry.js

@@ -1,4 +1,4 @@
-export { Z as z_thead } from './index-0ebe53c2.js';
+export { Z as z_thead } from './index-0a37a38c.js';
 import './index-c8ceadeb.js';
 
 //# sourceMappingURL=z-thead.entry.js.map

package/dist/esm/z-toast-notification-list.entry.js

@@ -41,7 +41,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: 'c0d5318c2d2ea4b114f3fe843006a2526384d44d', name: "toasts" });
+        return h("slot", { key: '9f4613d4ed99cfaa7dc88c733dfc842426e2043b', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toast-notification.entry.js

@@ -2826,7 +2826,7 @@ const ZToastNotification = class {
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: 'beb43ce29f5a836f01238134129ee0eef78d3f7b', style: {
+        return (h(Host, { key: '7fe2e526315635960c50d1f0d7b6bd020335c0d9', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/esm/z-toggle-button.entry.js

@@ -21,10 +21,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '40e03296813c2e590c4dac11949d96f1dbb124eb', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '22ad61104368df219d4aacc772aa34530b8706eb', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'fca73c6711943889a68d97d4fb8904907565968f', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'cbe7b7c639511d97dade2ca5503ff1c9200b8511', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/esm/z-toggle-switch.entry.js

@@ -29,14 +29,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '38db5de3b72a6f9758e659de273cd442e3682489' }, h("input", { key: '0cb35639d2d30db6b9c29e8f96a9bd067a1d3d75', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'c92a2feeca5da867b316c5f5c27704f6ac3bfdac', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '6675806ca9b414e1916dcdbdae8fd7504e0a2a93' }, h("input", { key: 'cf66932155264fb96c8849b71853d3594d0d8b9b', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '6734a2b20b90efcdd2177e14336468570b420af5', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'baddbf963a2ba64b1768b93e2791a01d3bbacc47' }, h("slot", { key: '7cac9769b322655101a15e746921e103a4569a07' })), h("span", { key: 'e1747bdce3b7ad3ad0b354f9d864e7fcace42d26', class: {
+            } }, h("span", { key: 'f9de16c679a5b16cfd9b1c632505494d03ca0a8c' }, h("slot", { key: '8fb4930783edc5eb67b61282cdd9c1e6a332b142' })), h("span", { key: '3a61685310014d1ca0281d8397085b4582e7398c', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '47814a2f975086f4044f6f50d1f7402aece53c15', class: "circle" }, this.checked && (h("z-icon", { key: '56ca84b760f4cc1abbb2a5e8a4eb44a07a5d0f91', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '81cfeefc9d1292d2ddde065acd314b8462cc4990', class: "circle" }, this.checked && (h("z-icon", { key: 'bf9dbc07fed087fcdb222e3c181d4298120ed943', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/esm/z-tooltip.entry.js

@@ -17,7 +17,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: 'd7f54583b5632dc53433087925034a82c80cefa5', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'e478ae3573617a2f6653b8fc7d71a453f1a498f2' })));
+        return (h("z-popover", { key: '89fc6fc0473616f0ccaa0c875d4cbeb719f0a447', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'e4815a820121b47ce8f7677cfb4ec53c70b22596' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/esm/z-tr.entry.js

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-7ff7476c.js';
+export { Z as z_tr } from './index-9ebdda49.js';
 import './index-c8ceadeb.js';
 import './utils-c7062cf7.js';
 import './index-fe87283d.js';
 import './breakpoints-d148bfde.js';
-import './index-f87879d9.js';
-import './index-f75609c5.js';
+import './index-134918ad.js';
+import './index-b6e9fe98.js';
 
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-tree-list.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list z-list-element::before{position:absolute;z-index:100;top:2px;left:-8px;width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon);content:\"\"}z-list z-list-element::after{position:absolute;z-index:100;top:2px;left:-8px;width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon);content:\"\"}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:calc(var(--space-unit) * 5);content:\"\";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.052px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:2px;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}";
+const ZTreeListStyle0 = stylesCss;
+
+const ZTreeList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.treeItemClicked = createEvent(this, "treeItemClicked", 7);
+        this.items = [];
+    }
+    handleClick(item) {
+        this.treeItemClicked.emit({ id: item.id, name: item.name, url: item.url });
+    }
+    renderTreeList(item) {
+        this.htmlTag = item.url ? "a" : "span";
+        return (h("z-list-element", { class: !item.icon ? "no-icon-elm" : "", clickable: !!item.url, hasTreeItems: true }, h(this.htmlTag, { class: {
+                "list-element": true,
+                "z-link": !!item.url,
+                "link-clickable": !!item.url,
+            }, tabIndex: 0, onClick: () => this.handleClick(item), href: item.url ? item.url : undefined }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { width: 16, height: 16, fill: item.url ? "color-primary01" : "color-default-icon", class: "item-icon", name: item.icon })), h("span", { class: {
+                "item-label": true,
+                "no-icon-label": !item.icon,
+                "bold-item": item.bold,
+            }, title: item.name }, item.name))), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child) => this.renderTreeList(child))))) : null));
+    }
+    render() {
+        return h(Host, { key: '263c8dd3b70f235e0011ac14b4965f954e26dc02', class: "tree-list" }, this.items.map((item) => this.renderTreeList(item)));
+    }
+    get host() { return getElement(this); }
+};
+ZTreeList.style = ZTreeListStyle0;
+
+export { ZTreeList as z_tree_list };
+
+//# sourceMappingURL=z-tree-list.entry.js.map

package/dist/esm/z-tree-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-tree-list.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,whEAAwhE,CAAC;AAC3iE,wBAAe,SAAS;;MCOX,SAAS;;;;qBAKI,EAAE;;IAQlB,WAAW,CAAC,IAAkB;QACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAC,CAAC,CAAC;KAC1E;IAEO,cAAc,CAAC,IAAkB;QACvC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;QAEvC,QACE,sBACE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,aAAa,GAAG,EAAE,EACtC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,EACrB,YAAY,EAAE,IAAI,IAElB,EAAC,IAAI,CAAC,OAAO,IACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;gBACpB,gBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;aAC7B,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,IAErC,YAAM,KAAK,EAAC,eAAe,IACxB,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MACT,cACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,iBAAiB,GAAG,oBAAoB,EACzD,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACD,YACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,CAAC,IAAI,CAAC,IAAI;gBAC3B,WAAW,EAAE,IAAI,CAAC,IAAI;aACvB,EACD,KAAK,EAAE,IAAI,CAAC,IAAI,IAEf,IAAI,CAAC,IAAI,CACL,CACF,CACM,EACd,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IACxC,kBACE,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAO,CACpF,IACP,IAAI,CACO,EACjB;KACH;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;KAC7F;;;;;;;","names":[],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n  padding-top: var(--space-unit);\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 2px;\n  left: -8px;\n  width: var(--space-unit);\n  height: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-small) solid var(--color-disabled01-icon);\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n  content: \"\";\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 2px;\n  left: -8px;\n  width: var(--space-unit);\n  height: 100%;\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n  content: \"\";\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: 0;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\nz-list-element > .list-element.link-clickable {\n  color: var(--color-primary01);\n}\n\nz-list-element > .list-element.link-clickable:hover {\n  text-decoration: underline;\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -1px;\n  display: block;\n  width: 100%;\n  height: calc(var(--space-unit) * 5);\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label {\n  overflow: hidden;\n  flex-grow: 1;\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.052px;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.item-label.bold-item {\n  font-weight: var(--font-sb);\n}\n\n.item.ellipsis {\n  display: flex;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n  padding-top: 2px;\n  padding-left: calc(var(--space-unit) * 1.25);\n}\n\n.item-icon {\n  margin-right: var(--space-unit);\n}\n\n.no-icon-label {\n  padding-left: var(--space-unit);\n}\n\n.children-node > z-list-element.no-icon-elm {\n  padding-left: 0;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] = [];\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private htmlTag: string;\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private renderTreeList(item: TreeListItem): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    return (\n      <z-list-element\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={!!item.url}\n        hasTreeItems={true}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": !!item.url,\n            \"link-clickable\": !!item.url,\n          }}\n          tabIndex={0}\n          onClick={() => this.handleClick(item)}\n          href={item.url ? item.url : undefined}\n        >\n          <span class=\"item ellipsis\">\n            {item?.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children && item.children.length > 0 ? (\n          <z-list>\n            <div class=\"children-node\">{item.children.map((child) => this.renderTreeList(child))}</div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\n  }\n\n  render(): HTMLZTreeListElement {\n    return <Host class=\"tree-list\">{this.items.map((item) => this.renderTreeList(item))}</Host>;\n  }\n}\n"],"version":3}

package/dist/esm/z-visually-hidden.entry.js

@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: '3621cee7a23fe68812b92d58a239dce03caf4724' });
+        return h("slot", { key: '8ca881dc43010ed69614a798812c0eb0aff6f994' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/beans/index.d.ts

@@ -406,3 +406,11 @@ export declare enum AccordionVariant {
     DEFAULT = "default",
     BACKGROUND = "background"
 }
+export type TreeListItem = {
+    id: string;
+    name: string;
+    url: string;
+    icon?: string;
+    bold?: boolean;
+    children?: TreeListItem[];
+};

package/dist/types/components/list/z-tree-list/index.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { TreeListItem } from "../../../beans";
+export declare class ZTreeList {
+    host: HTMLZTreeListElement;
+    /** Items to render, if they have the url property they will be rendered as clickable links */
+    items: TreeListItem[];
+    /** Emitted on item click, it return the id, name and url of the clicked item */
+    treeItemClicked: EventEmitter<{
+        id: string;
+        name: string;
+        url: string;
+    }>;
+    private htmlTag;
+    private handleClick;
+    private renderTreeList;
+    render(): HTMLZTreeListElement;
+}

package/dist/types/components/list/z-tree-list/index.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from "@storybook/web-components";
+import "./index";
+declare const StoryMeta: {
+    title: string;
+    component: string;
+    argTypes: {
+        clickable: {
+            control: "boolean";
+        };
+        boldParents: {
+            control: "boolean";
+        };
+        items: {
+            control: "object";
+        };
+    };
+    args: {
+        boldParents: boolean;
+        items: {
+            name: string;
+            icon: string;
+            children: {
+                name: string;
+                icon: string;
+            }[];
+        }[];
+    };
+};
+export default StoryMeta;
+export declare const Base: StoryObj;
+export declare const BoldParents: StoryObj;
+export declare const Clickable: StoryObj;
+export declare const ClickableAndBoldParents: StoryObj;
+export declare const OtherVariants: StoryObj;

package/dist/types/components.d.ts

@@ -5,11 +5,11 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 import { AlertType, LicenseType } from "./beans/index";
 import { ZFileUploadError } from "./components/file-upload/z-file-upload/index";
 import { ListItem } from "./beans/index.js";
-export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 export { AlertType, LicenseType } from "./beans/index";
 export { ZFileUploadError } from "./components/file-upload/z-file-upload/index";
 export { ListItem } from "./beans/index.js";
@@ -2161,6 +2161,12 @@ export namespace Components {
          */
         "expandable": boolean;
     }
+    interface ZTreeList {
+        /**
+          * Items to render, if they have the url property they will be rendered as clickable links
+         */
+        "items": TreeListItem[];
+    }
     interface ZVisuallyHidden {
     }
 }
@@ -2332,6 +2338,10 @@ export interface ZTrCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZTrElement;
 }
+export interface ZTreeListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZTreeListElement;
+}
 declare global {
     interface HTMLZAccordionElementEventMap {
         "toggled": boolean;
@@ -3513,6 +3523,23 @@ declare global {
         prototype: HTMLZTrElement;
         new (): HTMLZTrElement;
     };
+    interface HTMLZTreeListElementEventMap {
+        "treeItemClicked": {id: string; name: string; url: string};
+    }
+    interface HTMLZTreeListElement extends Components.ZTreeList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZTreeListElementEventMap>(type: K, listener: (this: HTMLZTreeListElement, ev: ZTreeListCustomEvent<HTMLZTreeListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLZTreeListElementEventMap>(type: K, listener: (this: HTMLZTreeListElement, ev: ZTreeListCustomEvent<HTMLZTreeListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLZTreeListElement: {
+        prototype: HTMLZTreeListElement;
+        new (): HTMLZTreeListElement;
+    };
     interface HTMLZVisuallyHiddenElement extends Components.ZVisuallyHidden, HTMLStencilElement {
     }
     var HTMLZVisuallyHiddenElement: {
@@ -3599,6 +3626,7 @@ declare global {
         "z-toggle-switch": HTMLZToggleSwitchElement;
         "z-tooltip": HTMLZTooltipElement;
         "z-tr": HTMLZTrElement;
+        "z-tree-list": HTMLZTreeListElement;
         "z-visually-hidden": HTMLZVisuallyHiddenElement;
     }
 }
@@ -5950,6 +5978,16 @@ declare namespace LocalJSX {
          */
         "onExpand"?: (event: ZTrCustomEvent<any>) => void;
     }
+    interface ZTreeList {
+        /**
+          * Items to render, if they have the url property they will be rendered as clickable links
+         */
+        "items"?: TreeListItem[];
+        /**
+          * Emitted on item click, it return the id, name and url of the clicked item
+         */
+        "onTreeItemClicked"?: (event: ZTreeListCustomEvent<{id: string; name: string; url: string}>) => void;
+    }
     interface ZVisuallyHidden {
     }
     interface IntrinsicElements {
@@ -6032,6 +6070,7 @@ declare namespace LocalJSX {
         "z-toggle-switch": ZToggleSwitch;
         "z-tooltip": ZTooltip;
         "z-tr": ZTr;
+        "z-tree-list": ZTreeList;
         "z-visually-hidden": ZVisuallyHidden;
     }
 }
@@ -6342,6 +6381,7 @@ declare module "@stencil/core" {
              * to prevent the row from expanding.
              */
             "z-tr": LocalJSX.ZTr & JSXBase.HTMLAttributes<HTMLZTrElement>;
+            "z-tree-list": LocalJSX.ZTreeList & JSXBase.HTMLAttributes<HTMLZTreeListElement>;
             "z-visually-hidden": LocalJSX.ZVisuallyHidden & JSXBase.HTMLAttributes<HTMLZVisuallyHiddenElement>;
         }
     }

package/dist/web-components-library/{p-7d2ecca2.entry.js → p-016255b0.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,a as i,g as o}from"./p-75c4a726.js";import{g as n}from"./p-dfcf9936.js";const a=':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const h=a;const l=class{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===n.ENTER||t.key===n.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case n.ESC:case n.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case n.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case n.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case n.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(s){t(this,s);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.htmlTabindex=-1;this.open=undefined;this.hasItems=undefined;this.items=undefined;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return s(i,{key:"afebd732b174678d4768c47d64f353e1642ca893",open:this.open},s("button",{key:"9dbc8821467edff6d455f1858e117f1f63e8bf78",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{key:"18de192f07c716364daef6837e616a674cd62d84",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"157b9e12cdfca3695c297b3a9a94eb908fb7edb9",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"1f48178a296e0e85e5b288d7c205bbe4bf16e1d9",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"e3807411b3f9fd40ec627b93a09b8237aa1e89e7",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:["onOpenChange"],htmlTabindex:["onTabindexChange"]}}};l.style=h;export{l as z_menu_section};
-//# sourceMappingURL=p-7d2ecca2.entry.js.map
+import{r as t,c as e,h as s,a as i,g as o}from"./p-75c4a726.js";import{g as a}from"./p-dfcf9936.js";const n=':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const h=n;const l=class{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(s){t(this,s);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.htmlTabindex=-1;this.open=undefined;this.hasItems=undefined;this.items=undefined;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return s(i,{key:"d08c7f78843f0b6b4b52d87c4e4799d602818f3e",open:this.open},s("button",{key:"ddd592e2daa41a49ddf6a371e450f731476a7718",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{key:"7c5dab71de7c69c68b22515ef85181e6f032326a",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"d317dbdda61b8ff838f4d4a09c4de385705d5ef8",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"cf8cbe0600e0b2068bbed0e02b89c4daac19e02d",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"6fd0f88d5e74493c5ab30a9d1ea136ada4ee43e8",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:["onOpenChange"],htmlTabindex:["onTabindexChange"]}}};l.style=h;export{l as z_menu_section};
+//# sourceMappingURL=p-016255b0.entry.js.map

package/dist/web-components-library/{p-1ece11f1.entry.js → p-023dd389.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c,h,g as e}from"./p-75c4a726.js";import{w as r}from"./p-dfcf9936.js";const a=".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";const s=a;const o=class{constructor(h){i(this,h);this.interactiveIconClick=c(this,"interactiveIconClick",7);this.icon=undefined;this.type=r.DEFAULT;this.interactiveIcon=undefined;this.disabled=false;this.ariaLabel=""}render(){return h("div",{key:"1bc99f432f17f5eb2233310ac9909cc0ace7dda3",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true},"aria-disabled":this.disabled},this.icon&&h("z-icon",{key:"9c77fb017180343a3b6961d1214d0ed1be1f43cd",name:this.icon}),h("slot",{key:"9ab62efb04412491b4ca1a0bb59bc95a898fea43"}),this.interactiveIcon&&h("button",{key:"e1999e99ff5e31019aa06d7087286e8be0081cae",type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.ariaLabel,disabled:this.disabled},h("z-icon",{key:"7d2445d7957b94f7959e3a0d0f47985daa170711",class:"interactive-icon",name:this.interactiveIcon})))}get el(){return e(this)}};o.style=s;export{o as z_chip};
-//# sourceMappingURL=p-1ece11f1.entry.js.map
+import{r as i,c,h,g as r}from"./p-75c4a726.js";import{w as e}from"./p-dfcf9936.js";const a=".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";const s=a;const o=class{constructor(h){i(this,h);this.interactiveIconClick=c(this,"interactiveIconClick",7);this.icon=undefined;this.type=e.DEFAULT;this.interactiveIcon=undefined;this.disabled=false;this.ariaLabel=""}render(){return h("div",{key:"7c626f67d1f536afaa5fb78f4b18403d533a3465",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true},"aria-disabled":this.disabled},this.icon&&h("z-icon",{key:"903d2ce1bed13bb07345465574a06781fc1c95d7",name:this.icon}),h("slot",{key:"cdf89485484cef718fc469969dc872f552ebede7"}),this.interactiveIcon&&h("button",{key:"6a566cd99721487d7d86abc6d8ed52200d403c0f",type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.ariaLabel,disabled:this.disabled},h("z-icon",{key:"529e0d75476574ca0a4901d34c590cea1297e3a9",class:"interactive-icon",name:this.interactiveIcon})))}get el(){return r(this)}};o.style=s;export{o as z_chip};
+//# sourceMappingURL=p-023dd389.entry.js.map