npm - @zanichelli/albe-web-components - Versions diffs - 19.2.12-rc3 → 19.2.12 - Mend

@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1449) hide show

package/dist/cjs/z-toggle-button.cjs.entry.js CHANGED Viewed

@@ -23,12 +23,15 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (index.h("button", { key: '3448d665412b78c55f77951e408df8abaa158803', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (index.h("button", { key: '12715211c2a202659aebbbafce50ef723523e5b5', 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() }, index.h("z-icon", { key: '4514f07522fc6ecfced03793a5bc58e7c8f185e8', 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() }, index.h("z-icon", { key: '2e6c9c85c5728eb03116da7b58f13da76abd1cf1', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = stylesCss();
 exports.z_toggle_button = ZToggleButton;
+//# sourceMappingURL=z-toggle-button.entry.cjs.js.map
+//# sourceMappingURL=z-toggle-button.cjs.entry.js.map

package/dist/cjs/z-toggle-button.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-toggle-button.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,+hCAA+hC,CAAC;;MCO5iC,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAYE,QAAA,IAAA,CAAA,UAAU,GAAa,KAAK;;AAQ5B,QAAA,IAAA,CAAA,MAAM,GAAa,KAAK;;AAIxB,QAAA,IAAA,CAAA,SAAS,GAAG,EAAE;AAqCf;IA/BS,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB;;AAGF,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;AAChC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAA,eAAA,EACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EAAA,EAErCA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,EACD,IAAI,CAAC,KAAK,CACJ;;;;;;;","names":["h"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n display: flex;\n height: 36px;\n align-items: center;\n padding-right: calc(var(--space-unit) * 2);\n padding-left: 0;\n border: var(--border-size-medium) solid;\n border-color: transparent;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-2);\n color: var(--color-primary01);\n cursor: pointer;\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n outline: none;\n text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n border: 0;\n}\n\nbutton:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n border-color: var(--color-pressed-primary);\n box-shadow: var(--shadow-2);\n color: var(--color-pressed-primary);\n fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n color: var(--color-disabled03);\n fill: var(--color-disabled03);\n}\n\nz-icon {\n display: inline-block;\n margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\nbutton.isopen {\n top: -20px;\n}\n\nbutton.avoid-clicks {\n pointer-events: none;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-toggle-button\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToggleButton implements ComponentInterface {\n /** label text */\n @Prop()\n label: string;\n\n /** disabled status flag (optional) */\n @Prop()\n isdisabled?: boolean = false;\n\n /** avoidclick status flag */\n @Prop()\n avoidclick: boolean;\n\n /** open by default (optional) */\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /** aria-label for the button */\n @Prop()\n ariaLabel = \"\";\n\n /** emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-toggle-switch.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-D_S5lGcb.js');
 var index$1 = require('./index-wGaSHN1_.js');
-var utils = require('./utils-BY7xrW7W.js');
+var utils = require('./utils-DRCgbM7t.js');
 require('./breakpoints-B7vFm-3T.js');
 const stylesCss = () => `.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}`;
@@ -34,16 +34,19 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (index.h(index.Host, { key: 'd31f156ba646f113f8f2509afdaee3e79fdb33f7' }, index.h("input", { key: '48a3963dd555c00867816af0169ed677dc4ccc68', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: '3872377775f759727b62288794555cd84e60b12c', htmlFor: this.htmlid, class: {
+        return (index.h(index.Host, { key: '56f9d8ff6eb13dfa9c113cbf6c0938e141d55c67' }, index.h("input", { key: '3417b90e089286fad9bccb61a5f4b39ae4168f91', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'ddd2fe347095d9551d8881c83a9a88f2a76baa75', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, index.h("span", { key: 'b46cb8e359cdb11e696a116661659c9872d49a1e' }, index.h("slot", { key: '42fc26c0ced09c5fdda062735fe543b8cb57a658' })), index.h("span", { key: 'b55f0fbd2ff23f01c1ac0b845c6af5571d81c13f', class: {
+            } }, index.h("span", { key: '8532e35c90ac967e7bd5ba19b6cfb427e30a8a9e' }, index.h("slot", { key: '013eb019d7033bdf49fc2ca79ec647dc47aa5516' })), index.h("span", { key: '4aa4b5abb12d819bb253c68f8315baf89935dd70', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, index.h("span", { key: '87bc69be905d84458fec5384f756348a94e446fe', class: "circle" }, this.checked && (index.h("z-icon", { key: '4464b2bf8aa91a7c0c5c9e2bff26e84ff7c34be2', width: 12, height: 12, name: "checkmark" })))))));
+            } }, index.h("span", { key: '1379aa626ccb15cc65337fd09063865051078dfb', class: "circle" }, this.checked && (index.h("z-icon", { key: 'c69f5f85fd886ae9ab30a559a6db66c1ad4f1db7', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = stylesCss();
 exports.z_toggle_switch = ZToggleSwitch;
+//# sourceMappingURL=z-toggle-switch.entry.cjs.js.map
+//# sourceMappingURL=z-toggle-switch.cjs.entry.js.map

package/dist/cjs/z-toggle-switch.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-toggle-switch.cjs.entry.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,u5EAAu5E,CAAC;;MCUp6E,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AASE,QAAA,IAAA,CAAA,QAAQ,GAAa,KAAK;;AAI1B,QAAA,IAAA,CAAA,aAAa,GAAIA,qBAAa,CAAC,IAAI;;AAInC,QAAA,IAAA,CAAA,OAAO,GAAa,KAAK;;AAIzB,QAAA,IAAA,CAAA,MAAM,GAAG,oBAAoBC,cAAQ,EAAE,EAAE;AA+D1C;IAzDS,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,SAAA,CAAC;;AAGI,IAAA,WAAW,CAAC,EAAE,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;;QAGF,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO;QAChC,IAAI,CAAC,eAAe,EAAE;;IAGxB,MAAM,GAAA;AACJ,QAAA,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CACrC,EACFA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;AACL,gBAAA,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,EACjB,IAAI,CAAC,OAAO,KACXA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,EAAA,CACR,CACX,CACI,CACF,CACD,CACH;;;;;;;","names":["LabelPosition","randomId","h","Host"],"sources":["src/components/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-default-text);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch implements ComponentInterface {\n /** Disabled flag */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** Label position */\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /** Checked state */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** HTML id attribute to set to the internal checkbox */\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /** Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-tool.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-D_S5lGcb.js');
 var index$1 = require('./index-wGaSHN1_.js');
-var utils = require('./utils-BY7xrW7W.js');
+var utils = require('./utils-DRCgbM7t.js');
 require('./breakpoints-B7vFm-3T.js');
 const stylesCss = () => `:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;
@@ -189,10 +189,10 @@ const ZTool = class {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (index.h(index.Host, { key: 'f5da5cd309607dc94dd12a28596b2ea02d28ba4c', class: { "z-tool-tooltip-open": this.tooltipOpen } }, index.h("button", { key: 'be63d078b5035ba1f08c480c8c08f365b3115191', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: 'a08b5432871a1522374633050a835bb18001a6d6', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (index.h("z-tooltip", { key: '9e0fa11a43662f333404543e315b097aa96ab08c', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? index$1.PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, index.h("span", { key: 'bfc2be83824830ed05b70f423e9f044015624f49', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("z-popover", { key: '717697756e5333f066f96c96695cd9741b006e93', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (index.h(index.Host, { key: '5adf35d9c14bc55415a5f333f032d07e70c679ce', class: { "z-tool-tooltip-open": this.tooltipOpen } }, index.h("button", { key: '9042104162bc039b37f109bac99f3213a3865f7f', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, index.h("z-icon", { key: '21f9a4e4a429b3d4a8cc294195ebcec03baebdff', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (index.h("z-tooltip", { key: '98d553c4bc74b15b5762284dd3f973086a5dc39c', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? index$1.PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, index.h("span", { key: 'ae88d5b59fe21ec1df190c3599042740c3a76634', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (index.h("z-popover", { key: '796d9040bbf935d87b0981d64d6e0404a36189b0', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? index$1.PopoverPosition.TOP : index$1.PopoverPosition.BOTTOM }, index.h("slot", { key: 'd151d02e38fb7a0941012ec969b6cea647721846' })))));
+            closable: false, position: this.isMobile ? index$1.PopoverPosition.TOP : index$1.PopoverPosition.BOTTOM }, index.h("slot", { key: 'a16a3b105a1488373193752b3c9eeb2eab0dc0c2' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -207,3 +207,6 @@ const ZTool = class {
 ZTool.style = stylesCss() + typographyCss();
 exports.z_tool = ZTool;
+//# sourceMappingURL=z-tool.entry.cjs.js.map
+//# sourceMappingURL=z-tool.cjs.entry.js.map

package/dist/cjs/z-tool.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-tool.cjs.entry.js","mappings":"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","names":["PopoverPosition","KeyboardCode","containsElement","h","Host"],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/tokens/typography.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n.z-tool {\n --z-tool-size: calc(var(--space-unit) * 5.5);\n --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n position: relative;\n display: inline-flex;\n width: var(--z-tool-size);\n height: var(--z-tool-size);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n:host(:is([active], [open])) .z-tool {\n box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n background: var(--color-primary03);\n}\n\n@media (hover: hover) {\n :host(:hover),\n :host(.z-tool-tooltip-open) {\n /* ensure any open tooltip is shown over sibling elements */\n z-index: 1;\n }\n\n :host(:not([disabled])) .z-tool:hover {\n background-color: var(--color-primary03);\n }\n}\n\n.z-tool:focus:focus-visible {\n background-color: var(--color-primary03);\n outline: none;\n}\n\nz-icon {\n --z-icon-width: var(--z-tool-icon-size);\n --z-icon-height: var(--z-tool-icon-size);\n\n display: block;\n fill: var(--color-default-icon);\n}\n\n:host([disabled]) .z-tool {\n color: var(--color-disabled01-icon);\n cursor: not-allowed;\n}\n\n:host([disabled]) z-icon {\n fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n --z-tooltip-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n --z-tooltip-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n position: relative;\n z-index: 2;\n font-family: var(--font-family-sans);\n white-space: nowrap;\n}\n\n.z-tool-submenu {\n z-index: 3;\n border-radius: calc(var(--border-radius) + var(--border-size-small));\n}\n\n.z-tool-submenu ::slotted(z-color-picker) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n@media (max-width: 767px) and (hover: none) {\n .z-tool-tooltip {\n display: none !important;\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n tag: \"z-tool\",\n styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZTool implements ComponentInterface {\n @Element() hostElement: HTMLZToolElement;\n\n /** Tool icon */\n @Prop()\n icon: IconName;\n\n /** Text displayed inside the tooltip. */\n @Prop()\n tooltip?: string;\n\n /** Preferred tooltip position. Defaults to true. */\n @Prop()\n tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n /** Accessible label for the tool trigger. Falls back to tooltip content. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Visual active state. */\n @Prop({reflect: true})\n active = false;\n\n /** Disabled state. */\n @Prop({reflect: true})\n disabled = false;\n\n /** Open state. */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * Color to use to fill the icon's color indicator, if it has one.\n * Can be any valid value for the `fill` svg attribute.\n * The value of this prop is passed down to the `z-icon` component inside the tool.\n *\n * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n */\n @Prop({mutable: true})\n indicatorColor?: string;\n\n @State()\n tooltipOpen = false;\n\n @State()\n hasSlottedContent = false;\n\n @State()\n isMobile = false;\n\n /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n @State()\n hasNestedOpenTools = false;\n\n /** Emitted when the open state changes. */\n @Event()\n toggleSubmenu: EventEmitter;\n\n /** Emitted when the tooltip open state changes. */\n @Event()\n toggleTooltip: EventEmitter;\n\n private buttonRef?: HTMLButtonElement;\n\n private iconRef?: HTMLElement;\n\n private tooltipRef?: HTMLZTooltipElement;\n\n private hoverDelay?: ReturnType<typeof setTimeout>;\n\n /** Indicates if the tool is nested inside another tool. */\n private isNested = false;\n\n /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n private mainToolbar?: HTMLZToolbarElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /**\n * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n */\n private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.hoverDelay = setTimeout(() => {\n this.tooltipOpen = true;\n }, 1000);\n };\n\n /**\n * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n */\n private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n };\n\n /**\n * Handles click events on the tool's button element.\n * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n * or the first item if no active/selected item is found.\n */\n private handleClick = (): void => {\n if (this.disabled || !this.hasSlottedContent) {\n return;\n }\n\n this.open = !this.open;\n if (this.open) {\n const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n if (colorPicker) {\n colorPicker.setFocus();\n\n return;\n }\n\n // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n firstActiveOrEnabledNestedTool?.setFocus();\n }\n };\n\n /**\n * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n */\n private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n if ((event.target as HTMLElement) === this.tooltipRef) {\n return;\n }\n\n this.tooltipOpen = event.detail.open;\n };\n\n @Watch(\"open\")\n handleOpenChange(): void {\n this.toggleSubmenu.emit(this.open);\n }\n\n @Watch(\"tooltipOpen\")\n handleTooltipOpenChange(): void {\n this.toggleTooltip.emit(this.tooltipOpen);\n }\n\n /**\n * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n */\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.open || this.hasNestedOpenTools) {\n return;\n }\n\n switch (event.key) {\n case KeyboardCode.ESC:\n event.stopPropagation();\n this.open = false;\n this.setFocus();\n break;\n case KeyboardCode.TAB:\n if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n this.open = false;\n }\n break;\n }\n }\n\n /**\n * Close the popover on clicks outside the component, only if there are no nested open tools.\n * In that case any outside click should close the nested submenu(s) first.\n */\n @Listen(\"click\", {target: \"body\"})\n onOutsideClick(event: MouseEvent): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n return;\n }\n\n this.open = false;\n }\n\n @Listen(\"toggleSubmenu\")\n onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n if (ev.target === this.hostElement) {\n return;\n }\n\n if (ev.detail === true) {\n this.hasNestedOpenTools = true;\n\n return;\n }\n\n this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n }\n\n /**\n * Handles the `colorSelected` event from a nested `z-color-picker` component.\n * Updates the `indicatorColor` and closes the tool's popover.\n */\n @Listen(\"colorSelected\")\n handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n return;\n }\n\n this.indicatorColor = event.detail;\n this.open = false;\n this.setFocus();\n }\n\n /**\n * Close the submenu when focus moves outside the tool.\n */\n @Listen(\"focusin\", {target: \"body\", passive: true})\n handleExternalFocusin(ev: FocusEvent): void {\n const target = ev.target as Node;\n if (!containsElement(this.hostElement, target)) {\n this.open = false;\n }\n }\n\n /** Focuses the tool's button element. */\n @Method()\n async setFocus(): Promise<void> {\n if (this.disabled) {\n return;\n }\n\n setTimeout(() => {\n this.buttonRef?.focus();\n }, 50);\n }\n\n /** Sets the tab index of the tool's internal button element. */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n if (!this.buttonRef) {\n return;\n }\n\n this.buttonRef.tabIndex = this.disabled ? -1 : value;\n }\n\n /** Closes the tooltip. */\n @Method()\n async closeTooltip(): Promise<void> {\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n }\n\n componentWillLoad(): void {\n this.hasSlottedContent = this.hostElement.children.length > 0;\n this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n clearTimeout(this.hoverDelay);\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n render(): HTMLZToolElement {\n return (\n <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n <button\n class=\"z-tool\"\n type=\"button\"\n ref={(el) => (this.buttonRef = el)}\n aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n disabled={this.disabled}\n onClick={this.handleClick}\n onMouseEnter={this.handleTooltipOpen}\n onMouseLeave={this.handleTooltipClose}\n onFocus={this.handleTooltipOpen}\n onBlur={this.handleTooltipClose}\n >\n <z-icon\n ref={(el) => (this.iconRef = el)}\n name={this.icon}\n indicatorColor={this.indicatorColor}\n ></z-icon>\n </button>\n {this.tooltip && (\n <z-tooltip\n class=\"z-tool-tooltip\"\n ref={(el) => (this.tooltipRef = el)}\n bindTo={this.iconRef}\n open={this.tooltipOpen && !this.open}\n position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n dark\n onMouseLeave={this.handleTooltipClose}\n onBlur={this.handleTooltipClose}\n onOpenChange={this.onTooltipOpenChange}\n >\n <span class=\"body-4\">{this.tooltip}</span>\n </z-tooltip>\n )}\n {this.hasSlottedContent && (\n <z-popover\n class=\"z-tool-submenu\"\n open={this.open}\n bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n center\n /* disable auto-close to prevent unwanted close behaviors on mobile,\n when the bound element is the main toolbar */\n closable={false}\n position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n >\n <slot></slot>\n </z-popover>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-toolbar.cjs.entry.js CHANGED Viewed

@@ -131,7 +131,7 @@ const ZToolbar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9f77e33a2a5e3566137ca23c4a41526b58b46515', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: 'a62af35ef54781baee92f865a969a8642ce58703', onSlotchange: () => {
+        return (index.h(index.Host, { key: 'da37a1abe86b6c96aaabdc4f5714716ea3ce7281', role: "toolbar", "aria-label": this.htmlAriaLabel }, index.h("slot", { key: '73b950e1efb794a75930915ccb39cf58dc524fb0', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));
@@ -141,3 +141,6 @@ const ZToolbar = class {
 ZToolbar.style = stylesCss();
 exports.z_toolbar = ZToolbar;
+//# sourceMappingURL=z-toolbar.entry.cjs.js.map
+//# sourceMappingURL=z-toolbar.cjs.entry.js.map

package/dist/cjs/z-toolbar.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-toolbar.cjs.entry.js","mappings":"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","names":["KeyboardCode","h","Host"],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n:host {\n /**\n * @prop --z-toolbar-columns: Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n\n display: flex;\n width: fit-content;\n align-items: center;\n padding: 0;\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */\n box-shadow: var(--shadow-4);\n gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n :host {\n --z-toolbar-columns: 6;\n\n position: relative;\n display: grid;\n max-width: 100%;\n\n /* Draws a horizontal separator line between rows */\n background: repeating-linear-gradient(\n to bottom,\n transparent 0,\n transparent calc(var(--space-unit) * 5.5),\n var(--color-surface03) calc(var(--space-unit) * 5.5),\n var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n )\n center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n gap: var(--border-size-small) calc(var(--space-unit) / 2);\n grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));\n }\n\n ::slotted(z-divider) {\n display: none !important;\n }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n */\n@Component({\n tag: \"z-toolbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToolbar implements ComponentInterface {\n @Element() hostElement: HTMLZToolbarElement;\n\n /** Accessible label for the toolbar. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Index of the currently focusable item (roving tabindex). */\n @State()\n currentFocusIndex = 0;\n\n /** List of focusable tool elements. */\n private toolItems: HTMLZToolElement[] = [];\n\n componentDidLoad(): void {\n this.collectToolItems();\n this.updateTabIndexes();\n // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n }\n\n /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n private collectToolItems(): void {\n this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n }\n\n /**\n * Update the `tabindex` of all children tools based on the current focus index,\n * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n */\n private updateTabIndexes(): void {\n this.toolItems.forEach((tool, index) => {\n tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n });\n }\n\n private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n const tool = this.toolItems[index];\n if (!tool) {\n return;\n }\n\n this.currentFocusIndex = index;\n if (!tool.disabled) {\n tool.setFocus();\n this.updateTabIndexes();\n\n return;\n }\n\n if (fallback === \"next\") {\n this.focusNextTool();\n } else {\n this.focusPreviousTool();\n }\n }\n\n private focusNextTool(): void {\n const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n this.focusToolAt(nextIndex);\n }\n\n private focusPreviousTool(): void {\n const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n this.focusToolAt(prevIndex, \"previous\");\n }\n\n /**\n * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n * to prevent multiple submenus from being open at the same time.\n */\n @Listen(\"toggleSubmenu\")\n closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n if (!targetTool || !this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool && tool.open) {\n tool.open = false;\n }\n });\n }\n\n /**\n * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n * to prevent multiple tooltips from being open at the same time.\n */\n @Listen(\"toggleTooltip\")\n closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = event.target;\n if (!this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool) {\n tool.closeTooltip();\n }\n });\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n if (!toolElement || !this.toolItems.includes(toolElement)) {\n return;\n }\n\n const focusedIndex = this.toolItems.indexOf(toolElement);\n if (focusedIndex !== -1) {\n this.currentFocusIndex = focusedIndex;\n }\n\n switch (event.key) {\n case KeyboardCode.ARROW_RIGHT:\n event.preventDefault();\n this.focusNextTool();\n break;\n case KeyboardCode.ARROW_LEFT:\n event.preventDefault();\n this.focusPreviousTool();\n break;\n }\n }\n\n /**\n * When focus enters the toolbar, update the current focus index to match the focused tool,\n * so that roving tabindex is in sync with actual focus.\n */\n @Listen(\"focusin\")\n handleFocusIn(event: FocusEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n const index = this.toolItems.indexOf(toolElement);\n if (index !== -1 && index !== this.currentFocusIndex) {\n this.currentFocusIndex = index;\n this.updateTabIndexes();\n }\n }\n\n render(): HTMLZToolbarElement {\n return (\n <Host\n role=\"toolbar\"\n aria-label={this.htmlAriaLabel}\n >\n <slot\n onSlotchange={() => {\n this.collectToolItems();\n this.updateTabIndexes();\n }}\n ></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-tooltip.cjs.entry.js CHANGED Viewed

@@ -28,9 +28,12 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: '0cc1e8ea0e6896f5031309a5984c09df4b095d8b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, index.h("slot", { key: 'a0548343b099fe7986066d821a455f1092428b38' })));
+        return (index.h("z-popover", { key: '33f8d0a6de0f95f3218736b57451d80cd3cc9506', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, index.h("slot", { key: '3608136c1675f0f8823a216ab622af272685e8dc' })));
     }
 };
 ZTooltip.style = stylesCss();
 exports.z_tooltip = ZTooltip;
+//# sourceMappingURL=z-tooltip.entry.cjs.js.map
+//# sourceMappingURL=z-tooltip.cjs.entry.js.map

package/dist/cjs/z-tooltip.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-tooltip.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,sjBAAsjB,CAAC;;MCYnkB,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQE,QAAA,IAAA,CAAA,QAAQ,GAAoBA,uBAAe,CAAC,IAAI;;AAIhD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;AAEZ;;AAEG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;AAQZ;;;;AAIG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI;AAgChB;IApBC,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;;IAGjC,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAA,IAAA,EACN,SAAS,EAAA,IAAA,EACT,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA,EAE3DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACH;;;;;;;","names":["PopoverPosition","h"],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\n /**\n * @prop --z-tooltip-theme--surface: Background color of the popover.\n * @prop --z-tooltip-theme--text: Foreground color of the popover.\n * @prop --z-tooltip-shadow-filter: Drop-shadow filter of the popover.\n * @prop --z-tooltip-padding: Padding of the popover. The default is `8px` (`--space-unit`).\n */\n --z-tooltip-theme--surface: var(--color-surface01);\n --z-tooltip-theme--text: var(--color-default-text);\n --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n --z-tooltip-padding: var(--space-unit);\n}\n\nz-popover {\n --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n --z-popover-theme--text: var(--z-tooltip-theme--text);\n --z-popover-padding: var(--z-tooltip-padding);\n --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n\n:host([dark]) z-popover {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n */\n@Component({\n tag: \"z-tooltip\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTooltip implements ComponentInterface {\n /** Tooltip position. */\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /** Enable tooltip dark mode. */\n @Prop({reflect: true})\n dark = false;\n\n /**\n * The open state of the tooltip.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the tooltip.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Reflects `closable` prop of the popover.\n * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n */\n @Prop()\n closable = true;\n\n /**\n * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n */\n @Event()\n openChange: EventEmitter<{open: boolean}>;\n\n private popoverEl: HTMLZPopoverElement;\n\n @Listen(\"openChange\")\n onPopoverOpenChange(): void {\n this.open = this.popoverEl.open;\n }\n\n render(): HTMLZPopoverElement {\n return (\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.bindTo}\n open={this.open}\n position={this.position}\n closable={this.closable}\n center\n showArrow\n onOpenChange={(event) => this.openChange.emit(event.detail)}\n >\n <slot></slot>\n </z-popover>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-tr.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 'use strict';
 var index = require('./index-D_S5lGcb.js');
-var utils = require('./utils-BY7xrW7W.js');
+var utils = require('./utils-DRCgbM7t.js');
 require('./z-td.cjs.entry.js');
 require('./z-th.cjs.entry.js');
 require('./index-wGaSHN1_.js');
 require('./breakpoints-B7vFm-3T.js');
-const stylesCss = () => `:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover) ::slotted(z-td),:host(:hover) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;
+const stylesCss = () => `:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover):has([tabIndex]) ::slotted(z-td),:host(:hover):has([tabIndex]) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;
 const ZTr = class {
     constructor(hostRef) {
@@ -71,7 +71,7 @@ const ZTr = class {
         this.updateColumns();
     }
     render() {
-        return (index.h(index.Host, { key: 'e045e79af9cf2e3c29b4eb180c840b4657c893a3', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, index.h("div", { key: '8715e76d1ed1d64693c069a22f3c50040933ee4d', class: "z-tr--focus-overlay", "aria-hidden": "true" }), index.h("div", { key: '3d10e01e6183299d8a03dbcc6586950f74148743', class: "z-tr--expand-button-container" }, this.expandable && (index.h("button", { key: 'c43441d3fc106b2c0cf43c6def18bf0fc0062e7e', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, index.h("z-icon", { key: '8ec3aaa2c05de39c19a9e8ff291c98f9b35478e3', name: this.expanded ? "minus-circled" : "plus-circled" })))), index.h("slot", { key: 'a86066e86c9415b5eb03a0cd97d58e58ada095d2', onSlotchange: this.updateColumns.bind(this) })));
+        return (index.h(index.Host, { key: '92be779ec3e863cc85336fcedb02f718fa3a19fa', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, index.h("div", { key: '720c8209c21104e78129cbd76c12a6cdf8806ca2', class: "z-tr--focus-overlay", "aria-hidden": "true" }), index.h("div", { key: '3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302', class: "z-tr--expand-button-container" }, this.expandable && (index.h("button", { key: 'd27d18c1a4515ac055ce7db13ec3efdfc7d0314d', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, index.h("z-icon", { key: '9fd14fcab4ea512b42c63928c3e2dabb83fd1da3', name: this.expanded ? "minus-circled" : "plus-circled" })))), index.h("slot", { key: 'c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -83,3 +83,6 @@ const ZTr = class {
 ZTr.style = stylesCss();
 exports.z_tr = ZTr;
+//# sourceMappingURL=z-tr.entry.cjs.js.map
+//# sourceMappingURL=z-tr.cjs.entry.js.map

package/dist/cjs/z-tr.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-tr.cjs.entry.js","mappings":"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","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n --columns: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n:host(:hover):has([tabIndex]) ::slotted(z-td),\n:host(:hover):has([tabIndex]) ::slotted(z-th) {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n background-color: var(--color-surface02);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted(*) {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} 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 implements ComponentInterface {\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 private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\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}

package/dist/cjs/z-tree-list.cjs.entry.js CHANGED Viewed

@@ -100,7 +100,7 @@ const ZTreeList = class {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (index.h(index.Host, { key: 'ca5b846e86140efd7a98028001e646349cc5683a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, index.h("div", { key: 'eac955c253173abb6e5f0992d356311dc52f9ee6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (index.h(index.Host, { key: '68d06fd53ad0f4bce01853b95aef0f7482f3304a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, index.h("div", { key: '6b8010ae9caf73ec0a43b09f5d9610247110d1a6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -112,3 +112,6 @@ const ZTreeList = class {
 ZTreeList.style = stylesCss();
 exports.z_tree_list = ZTreeList;
+//# sourceMappingURL=z-tree-list.entry.cjs.js.map
+//# sourceMappingURL=z-tree-list.cjs.entry.js.map

package/dist/cjs/z-tree-list.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-tree-list.cjs.entry.js","mappings":"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","names":["KeyboardCode","h","Host"],"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-element::before,\nz-list-element::after {\n position: absolute;\n z-index: 100;\n top: 0.125rem;\n left: -0.5rem;\n content: \"\";\n}\n\nz-list z-list-element::before {\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}\n\nz-list z-list-element::after {\n width: var(--space-unit);\n height: 100%;\n border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element:last-child::after,\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 z-index: 100;\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: -0.0625rem;\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.0032rem;\n line-height: 1.25rem;\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: 0.125;\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\nz-list-element > .list-element:focus:focus-visible {\n position: relative;\n z-index: 200;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n@media (max-width: 767px) {\n z-list-element::before,\n z-list-element::after {\n top: 0.1875rem;\n }\n\n z-list z-list-element::before {\n height: calc(var(--space-unit) * 2.5);\n }\n\n .children-node > z-list-element {\n padding-top: var(--space-unit);\n }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n tag: \"z-tree-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTreeList implements ComponentInterface {\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[] | string = [];\n\n /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n @Prop({reflect: true})\n htmlAriaLabelledby: string;\n\n /** Used for aria-label attribute, sets name in \"tree\" */\n @Prop({reflect: true})\n htmlSectionTitle: string;\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 parsedItems: TreeListItem[] = [];\n\n private htmlTag: string;\n\n @Watch(\"items\")\n watchItems(): void {\n this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n private handleClick(item: TreeListItem): void {\n this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n }\n\n private getFocusableElements(): HTMLElement[] {\n return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n }\n\n private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n let ancestor: HTMLElement | null = element;\n\n for (let i = 0; i < levels; i++) {\n ancestor = ancestor?.parentElement;\n if (!ancestor) {\n return;\n }\n }\n\n return ancestor;\n }\n\n private handleArrowNav(event: KeyboardEvent): void {\n if (event.code === KeyboardCode.TAB) {\n event.preventDefault();\n\n return;\n }\n\n const focusableElements = this.getFocusableElements();\n const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n if (currentIndex === -1) {\n return;\n }\n\n if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n event.preventDefault();\n\n const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n return;\n }\n\n focusableElements[nextIndex].focus();\n }\n\n if (event.code === KeyboardCode.ARROW_LEFT) {\n event.preventDefault();\n const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n if (\n !ancestor ||\n !ancestor.children[0] ||\n (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n ) {\n return;\n }\n\n (ancestor.children[0] as HTMLElement).focus();\n }\n\n if (event.code === KeyboardCode.ARROW_RIGHT) {\n event.preventDefault();\n\n const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n if (!parentElm) {\n return;\n }\n\n const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n if (!childrenContainer) {\n return;\n }\n\n const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n if (!firstChild) {\n return;\n }\n\n firstChild.focus();\n }\n }\n\n private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n this.htmlTag = item.url ? \"a\" : \"span\";\n\n const treeListContent = (\n <z-list-element\n id={key}\n class={!item.icon ? \"no-icon-elm\" : \"\"}\n clickable={Boolean(item.url)}\n hasTreeItems={true}\n role=\"none\"\n aria-hidden={undefined}\n >\n <this.htmlTag\n class={{\n \"list-element\": true,\n \"z-link\": Boolean(item.url),\n \"link-clickable\": Boolean(item.url),\n }}\n tabIndex={item.url ? 0 : -1}\n onClick={() => this.handleClick(item)}\n onKeyUp={(event: KeyboardEvent) => {\n if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n this.handleClick(item);\n }\n }}\n onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n role={item.url ? \"treeitem\" : undefined}\n aria-hidden={item.url ? undefined : \"true\"}\n aria-expanded={item.children?.length > 0 && true}\n aria-level={level}\n aria-label={item.name}\n href={item.url}\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?.length > 0 && (\n <z-list role=\"group\">\n <div class=\"children-node\">\n {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n </div>\n </z-list>\n )}\n </z-list-element>\n );\n\n return treeListContent;\n }\n\n render(): HTMLZTreeListElement {\n const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n return (\n <Host\n class=\"tree-list\"\n role={hasClickableItems ? \"navigation\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-labelledby={this.htmlAriaLabelledby}\n >\n <div\n tabIndex={-1}\n role={hasClickableItems ? \"tree\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-label={this.htmlSectionTitle}\n >\n {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/z-visually-hidden.cjs.entry.js CHANGED Viewed

@@ -9,9 +9,12 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '7ddc72b3dc926a0205188bf75d5e42c15f913771' });
+        return index.h("slot", { key: 'e1a4d7e8ec823326ce9decd1bcbf5ffc3e2987bf' });
     }
 };
 ZVisuallyHidden.style = stylesCss();
 exports.z_visually_hidden = ZVisuallyHidden;
+//# sourceMappingURL=z-visually-hidden.entry.cjs.js.map
+//# sourceMappingURL=z-visually-hidden.cjs.entry.js.map

package/dist/cjs/z-visually-hidden.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-visually-hidden.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,gKAAgK,CAAC;;MCO7K,eAAe,GAAA,MAAA;;;;IAC1B,MAAM,GAAA;QACJ,OAAOA,oEAAQ;;;;;;;","names":["h"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n margin: 0 -1px -1px 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n}\n","import {Component, ComponentInterface, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-visually-hidden\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZVisuallyHidden implements ComponentInterface {\n render(): HTMLSlotElement {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/collection/beans/index.js CHANGED Viewed

@@ -401,3 +401,4 @@ export const ColorPickerPalette = {
     "#CC00CC": { it: "Rosa scuro 1", en: "Dark pink 1" },
     "#660066": { it: "Rosa scuro 2", en: "Dark pink 2" },
 };
+//# sourceMappingURL=index.js.map

package/dist/collection/beans/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/beans/index.tsx"],"names":[],"mappings":"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","sourcesContent":["export type MyzLink = {\n label: string;\n img: string;\n link: string;\n};\n\nexport enum LicenseType {\n REAL = \"reale\",\n VIRTUAL = \"virtuale\",\n TRIAL = \"saggio\",\n TEMP = \"reale_temp\",\n}\n\nexport type Card = {\n id: string;\n isbn: string;\n volumeTitle: string;\n operaTitle: string;\n img: string;\n authors: string;\n actions: Action[];\n isBookmark: boolean;\n licenseType: LicenseType;\n};\n\nexport enum CardVariant {\n BORDER = \"border\",\n SHADOW = \"shadow\",\n OVERLAY = \"overlay\",\n TEXT = \"text\",\n}\n\nexport type Action = {\n isLink: boolean;\n value: string;\n url?: string;\n};\n\nexport type ListItem = {\n text: string;\n link?: string;\n linktarget?: string;\n icon?: string;\n listitemid?: string;\n};\n\nexport type FilterItem = {\n name: string;\n id: string;\n isActive: boolean;\n isfixed: boolean;\n};\n\nexport type MenuItem = {\n id: string;\n label: string;\n link?: string;\n icon?: string;\n target?: string;\n subMenu?: MenuItem[];\n};\n\nexport type TabItem = {\n id: string;\n label: string;\n icon?: string;\n size?: string;\n selected?: boolean;\n disabled?: boolean;\n};\n\nexport enum NavigationTabsOrientation {\n HORIZONTAL = \"horizontal\",\n VERTICAL = \"vertical\",\n}\n\nexport enum NavigationTabsSize {\n BIG = \"big\",\n SMALL = \"small\",\n}\n\nexport enum NavigationTabsKeyboardEvents {\n LEFT = \"ArrowLeft\",\n RIGHT = \"ArrowRight\",\n UP = \"ArrowUp\",\n DOWN = \"ArrowDown\",\n}\n\nexport type HeaderUserData = {\n islogged: boolean;\n id?: number;\n name?: string;\n usergroup: number;\n userlinks: MenuItem[];\n};\n\nexport type ComboItem = {\n id: string;\n name: string;\n checked: boolean;\n category?: string;\n};\n\nexport enum ButtonVariant {\n PRIMARY = \"primary\",\n SECONDARY = \"secondary\",\n TERTIARY = \"tertiary\",\n}\n\nexport enum ButtonType {\n SUBMIT = \"submit\",\n RESET = \"reset\",\n BUTTON = \"button\",\n}\n\n/**\n * @deprecated Use ControlSize instead\n */\nexport enum ButtonSize {\n BIG = \"big\",\n SMALL = \"small\",\n X_SMALL = \"x-small\",\n}\n\nexport enum ControlSize {\n BIG = \"big\",\n SMALL = \"small\",\n X_SMALL = \"x-small\",\n}\n\nexport enum InputType {\n TEXT = \"text\",\n PASSWORD = \"password\",\n NUMBER = \"number\",\n EMAIL = \"email\",\n TEXTAREA = \"textarea\",\n CHECKBOX = \"checkbox\",\n RADIO = \"radio\",\n TEL = \"tel\",\n URL = \"url\",\n SEARCH = \"search\",\n}\n\nexport enum InputStatus {\n SUCCESS = \"success\",\n ERROR = \"error\",\n WARNING = \"warning\",\n}\n\nexport enum PopoverPosition {\n /** @deprecated This value is not needed anymore as the popover will always try to position itself automatically based on available space.\n *\n * Passing `AUTO` is the same as not passing any position value.\n * Use any of the other values to explicitly set the preferred position of the popover.\n */\n AUTO = \"auto\",\n TOP = \"top\",\n RIGHT = \"right\",\n BOTTOM = \"bottom\",\n LEFT = \"left\",\n TOP_RIGHT = \"top_right\",\n TOP_LEFT = \"top_left\",\n BOTTOM_RIGHT = \"bottom_right\",\n BOTTOM_LEFT = \"bottom_left\",\n RIGHT_TOP = \"right_top\",\n RIGHT_BOTTOM = \"right_bottom\",\n LEFT_TOP = \"left_top\",\n LEFT_BOTTOM = \"left_bottom\",\n}\n\nexport enum KeyboardKeyCode {\n TAB = 9,\n SPACE = 32,\n ESC = 27,\n ENTER = 13,\n ARROW_UP = 38,\n ARROW_DOWN = 40,\n BACKSPACE = 8,\n DELETE = 46,\n}\n\nexport enum KeyboardCode {\n TAB = \"Tab\",\n SPACE = \"Space\",\n ESC = \"Escape\",\n ENTER = \"Enter\",\n ARROW_UP = \"ArrowUp\",\n ARROW_DOWN = \"ArrowDown\",\n BACKSPACE = \"Backspace\",\n DELETE = \"Delete\",\n ARROW_RIGHT = \"ArrowRight\",\n ARROW_LEFT = \"ArrowLeft\",\n}\n\nexport type SelectItem = {\n id: string;\n name: string;\n selected: boolean;\n icon?: string;\n disabled?: boolean;\n category?: string;\n children?: SelectItem[];\n};\n\nexport enum ThemeVariant {\n DARK = \"dark\",\n LIGHT = \"light\",\n}\n\nexport enum DividerSize {\n SMALL = \"small\",\n MEDIUM = \"medium\",\n LARGE = \"large\",\n}\n\nexport enum DividerOrientation {\n HORIZONTAL = \"horizontal\",\n VERTICAL = \"vertical\",\n}\n\nexport enum SortDirection {\n ASC = \"asc\",\n DESC = \"desc\",\n}\n\nexport enum AvatarSize {\n SMALL = \"small\",\n MEDIUM = \"medium\",\n LARGE = \"large\",\n}\n\nexport enum ListSize {\n SMALL = \"small\",\n MEDIUM = \"medium\",\n LARGE = \"large\",\n X_LARGE = \"x-large\",\n NONE = \"none\",\n}\n\nexport enum ExpandableListStyle {\n ACCORDION = \"accordion\",\n MENU = \"menu\",\n}\n\nexport enum ExpandableListButtonAlign {\n RIGHT = \"right\",\n LEFT = \"left\",\n}\n\nexport enum LabelPosition {\n RIGHT = \"right\",\n LEFT = \"left\",\n}\n\nexport enum ListDividerType {\n NONE = \"none\",\n HEADER = \"header\",\n ELEMENT = \"element\",\n}\n\nexport enum ListType {\n NONE = \"none\",\n ORDERED = \"ordered\",\n UNORDERED = \"unordered\",\n}\n\nexport enum NotificationType {\n SUCCESS = \"success\",\n WARNING = \"warning\",\n ERROR = \"error\",\n}\n\nexport enum AlertType {\n SUCCESS = \"success\",\n WARNING = \"warning\",\n ERROR = \"error\",\n}\n\nexport enum Device {\n MOBILE = \"mobile\",\n TABLET = \"tablet\",\n DESKTOP = \"desktop\",\n DESKTOP_WIDE = \"desktop-wide\",\n}\n\nexport type DictionaryData = {\n author: string;\n year: string;\n title: string;\n description: string;\n onlineLicense: DictionaryLicenseData;\n offlineLicense: DictionaryLicenseData;\n};\n\nexport type DictionaryLicenseData = {\n expiration: string;\n expired: boolean;\n expiring: boolean;\n installations: string;\n};\n\nexport enum ToastNotification {\n DARK = \"dark\",\n LIGHT = \"light\",\n ACCENT = \"accent\",\n ERROR = \"error\",\n SUCCESS = \"success\",\n WARNING = \"warning\",\n}\n\nexport enum ToastNotificationTransition {\n SLIDE_IN_LEFT = \"slide-in-left\",\n SLIDE_IN_RIGHT = \"slide-in-right\",\n SLIDE_IN_DOWN = \"slide-in-down\",\n SLIDE_IN_UP = \"slide-in-up\",\n SLIDE_OUT_LEFT = \"slide-out-left\",\n SLIDE_OUT_RIGHT = \"slide-out-right\",\n SLIDE_OUT_DOWN = \"slide-out-down\",\n SLIDE_OUT_UP = \"slide-out-up\",\n}\n\nexport enum ToastNotificationPosition {\n TOP_RIGHT = \"top-right\",\n TOP_LEFT = \"top-left\",\n TOP_CENTRE = \"top-centre\",\n BOTTOM_RIGHT = \"bottom-right\",\n BOTTOM_LEFT = \"bottom-left\",\n BOTTOM_CENTRE = \"bottom-centre\",\n}\n\nexport enum ZTableRowExpandedType {\n EXPANDABLE = \"expandable\",\n PADDING = \"padding\",\n NONE = \"none\",\n}\n\nexport enum ZAriaAlertMode {\n POLITE = \"polite\",\n ASSERTIVE = \"assertive\",\n}\n\nexport enum TransitionDirection {\n LEFT = \"left\",\n RIGHT = \"right\",\n UP = \"up\",\n}\n\nexport enum OffCanvasVariant {\n OVERLAY = \"overlay\",\n PUSHCONTENT = \"pushcontent\",\n}\n\nexport enum ZFileUploadType {\n DEFAULT = \"default\",\n DRAGDROP = \"dragdrop\",\n}\n\nexport enum ZChipType {\n DEFAULT = \"default\",\n MEDIUM = \"medium\",\n SMALL = \"small\",\n}\n\nexport enum ZSectionTitleDividerPosition {\n BEFORE = \"before\",\n AFTER = \"after\",\n}\n\nexport enum ZDatePickerMode {\n DATE = \"date\",\n DATE_TIME = \"date-time\",\n MONTHS = \"months\",\n}\n\nexport enum ZDatePickerModeValue {\n DATE = 401,\n DATE_TIME = 523,\n MONTHS = 288,\n}\n\nexport enum ZDatePickerPosition {\n TOP = \"top\",\n BOTTOM = \"bottom\",\n}\n\nexport enum ZRangePickerMode {\n DATE = \"date\",\n DATE_TIME = \"date-time\",\n}\n\nexport type SkipToContentLink = {\n label: string;\n href: string;\n ariaLabel?: string;\n};\n\nexport enum InfoRevealPosition {\n TOP_RIGHT = \"top_right\",\n TOP_LEFT = \"top_left\",\n BOTTOM_RIGHT = \"bottom_right\",\n BOTTOM_LEFT = \"bottom_left\",\n}\n\nexport enum CoverHeroVariant {\n OVERLAY = \"overlay\",\n STACKED = \"stacked\",\n}\n\nexport enum CoverHeroContentPosition {\n TOP = \"top\",\n BOTTOM = \"bottom\",\n}\n\nexport enum CarouselArrowsPosition {\n OVER = \"over\",\n BOTTOM = \"bottom\",\n}\n\nexport enum CarouselProgressMode {\n DOTS = \"dots\",\n NUMBERS = \"numbers\",\n}\n\nexport type SearchbarItem = {\n label: string;\n id?: string;\n icon?: string;\n tag?: {icon?: string; text: string};\n category?: string;\n subcategory?: string;\n children?: Omit<SearchbarItem, \"category\" | \"subcategory\">[];\n};\n\nexport type SearchbarGroupedItem = {\n [key: string]: SearchbarGroup;\n};\n\nexport type SearchbarGroup = {\n items: SearchbarItem[];\n category?: string;\n subcategory?: string;\n};\n\nexport type BreadcrumbPath = {\n text?: string;\n path?: string;\n hasTooltip?: boolean;\n};\n\nexport enum BreadcrumbPathStyle {\n SEMIBOLD = \"semibold\",\n UNDERLINED = \"underlined\",\n}\n\nexport enum BreadcrumbHomepageVariant {\n TEXT = \"text\",\n ICON = \"icon\",\n}\n\nexport enum VisibilityCondition {\n HOVER = \"hover\",\n ALWAYS = \"always\",\n}\n\nexport enum BookCardVariant {\n LANDSCAPE = \"landscape\",\n PORTRAIT = \"portrait\",\n}\n\nexport enum BookCardDeprecatedVariant {\n EXPANDED = \"expanded\",\n COMPACT = \"compact\",\n SEARCH = \"search\",\n}\n\nexport enum AccordionVariant {\n DEFAULT = \"default\",\n BACKGROUND = \"background\",\n}\n\nexport type TreeListItem = {\n id: string;\n name: string;\n url: string;\n icon?: string;\n bold?: boolean;\n children?: TreeListItem[];\n};\n\nexport enum IconPosition {\n LEFT = \"left\",\n RIGHT = \"right\",\n}\n\n/** Map of color hex codes to their Italian and English names for the Color Picker Palette. */\nexport const ColorPickerPalette = {\n \"#FFFFFF00\": {it: \"Trasparente\", en: \"Transparent\"},\n \"#FFFFFF\": {it: \"Bianco\", en: \"White\"},\n \"#CCCCCC\": {it: \"Grigio\", en: \"Gray\"},\n \"#7E7E7E\": {it: \"Grigio scuro 1\", en: \"Dark gray 1\"},\n \"#333333\": {it: \"Grigio scuro 2\", en: \"Dark gray 2\"},\n\n \"#FFCCCC\": {it: \"Rosso chiaro 1\", en: \"Light red 1\"},\n \"#FF9999\": {it: \"Rosso chiaro 2\", en: \"Light red 2\"},\n \"#FF3333\": {it: \"Rosso\", en: \"Red\"},\n \"#CC0000\": {it: \"Rosso scuro 1\", en: \"Dark red 1\"},\n \"#660000\": {it: \"Rosso scuro 2\", en: \"Dark red 2\"},\n\n \"#FFE1CC\": {it: \"Arancione chiaro 1\", en: \"Light orange 1\"},\n \"#FFC399\": {it: \"Arancione chiaro 2\", en: \"Light orange 2\"},\n \"#FF8933\": {it: \"Arancione\", en: \"Orange\"},\n \"#CC5500\": {it: \"Arancione scuro 1\", en: \"Dark orange 1\"},\n \"#662B00\": {it: \"Arancione scuro 2\", en: \"Dark orange 2\"},\n\n \"#FFF7CC\": {it: \"Giallo chiaro 1\", en: \"Light yellow 1\"},\n \"#FFEE99\": {it: \"Giallo chiaro 2\", en: \"Light yellow 2\"},\n \"#FFDD33\": {it: \"Giallo\", en: \"Yellow\"},\n \"#CCAA00\": {it: \"Giallo scuro 1\", en: \"Dark yellow 1\"},\n \"#665600\": {it: \"Giallo scuro 2\", en: \"Dark yellow 2\"},\n\n \"#DDFFCC\": {it: \"Verde chiaro 1\", en: \"Light green 1\"},\n \"#BBFF99\": {it: \"Verde chiaro 2\", en: \"Light green 2\"},\n \"#77FF33\": {it: \"Verde\", en: \"Green\"},\n \"#44CC00\": {it: \"Verde scuro 1\", en: \"Dark green 1\"},\n \"#226600\": {it: \"Verde scuro 2\", en: \"Dark green 2\"},\n\n \"#CCFFE5\": {it: \"Verde acqua chiaro 1\", en: \"Light aquamarine 1\"},\n \"#99FFCC\": {it: \"Verde acqua chiaro 2\", en: \"Light aquamarine 2\"},\n \"#33FF99\": {it: \"Verde acqua\", en: \"Aquamarine\"},\n \"#00CC66\": {it: \"Verde acqua scuro 1\", en: \"Dark aquamarine 1\"},\n \"#006633\": {it: \"Verde acqua scuro 2\", en: \"Dark aquamarine 2\"},\n\n \"#CCEEFF\": {it: \"Azzurro chiaro 1\", en: \"Light blue 1\"},\n \"#99DDFF\": {it: \"Azzurro chiaro 2\", en: \"Light blue 2\"},\n \"#33BBFF\": {it: \"Azzurro\", en: \"Blue\"},\n \"#0088CC\": {it: \"Azzurro scuro 1\", en: \"Dark blue 1\"},\n \"#004466\": {it: \"Azzurro scuro 2\", en: \"Dark blue 2\"},\n\n \"#D4CCFF\": {it: \"Viola chiaro 1\", en: \"Light purple 1\"},\n \"#AA99FF\": {it: \"Viola chiaro 2\", en: \"Light purple 2\"},\n \"#5533FF\": {it: \"Viola\", en: \"Purple\"},\n \"#2200CC\": {it: \"Viola scuro 1\", en: \"Dark purple 1\"},\n \"#110066\": {it: \"Viola scuro 2\", en: \"Dark purple 2\"},\n\n \"#FFCCFF\": {it: \"Rosa chiaro 1\", en: \"Light pink 1\"},\n \"#FF99FF\": {it: \"Rosa chiaro 2\", en: \"Light pink 2\"},\n \"#FF33FF\": {it: \"Rosa\", en: \"Pink\"},\n \"#CC00CC\": {it: \"Rosa scuro 1\", en: \"Dark pink 1\"},\n \"#660066\": {it: \"Rosa scuro 2\", en: \"Dark pink 2\"},\n} as const satisfies Record<`#${string}`, {it: string; en: string}>;\nexport type ColorPickerPalette = keyof typeof ColorPickerPalette;\n"]}

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -2,16 +2,13 @@
   "entries": [
     "components/file-upload/z-file-upload/index.js",
     "components/book-card/z-book-card/index.js",
-    "components/z-button/index.js",
-    "components/z-icon/index.js",
-    "components/z-tag/index.js",
     "components/book-card/z-book-card-app/index.js",
     "components/date-picker/z-date-picker/index.js",
     "components/date-picker/z-range-picker/index.js",
     "components/deprecated/z-app-header-deprecated/index.js",
-    "components/deprecated/z-menu-deprecated/index.js",
-    "components/deprecated/z-menu-section-deprecated/index.js",
     "components/deprecated/z-book-card-deprecated/index.js",
+    "components/deprecated/z-menu-section-deprecated/index.js",
+    "components/deprecated/z-menu-deprecated/index.js",
     "components/deprecated/z-section-title/index.js",
     "components/file-upload/z-dragdrop-area/index.js",
     "components/file-upload/z-file/index.js",
@@ -29,29 +26,29 @@
     "components/z-accordion/index.js",
     "components/z-anchor-navigation/index.js",
     "components/z-app-header/index.js",
-    "components/z-menu-section/index.js",
-    "components/z-menu/index.js",
     "components/z-aria-alert/index.js",
-    "components/z-visually-hidden/index.js",
     "components/z-avatar/index.js",
     "components/z-book-cover/index.js",
     "components/z-breadcrumb/index.js",
+    "components/z-button/index.js",
     "components/z-button-sort/index.js",
     "components/z-card/index.js",
     "components/z-carousel/index.js",
-    "components/z-ghost-loading/index.js",
     "components/z-chip/index.js",
     "components/z-color-picker/index.js",
     "components/z-input/index.js",
     "components/z-combobox/index.js",
     "components/z-cover-hero/index.js",
-    "components/z-info-reveal/index.js",
     "components/z-divider/index.js",
+    "components/z-ghost-loading/index.js",
+    "components/z-icon/index.js",
     "components/z-info-box/index.js",
+    "components/z-info-reveal/index.js",
     "components/z-input-message/index.js",
     "components/z-logo/index.js",
+    "components/z-menu-section/index.js",
+    "components/z-menu/index.js",
     "components/z-modal/index.js",
-    "components/z-select/index.js",
     "components/z-navigation-tabs/index.js",
     "components/z-notification/index.js",
     "components/z-offcanvas/index.js",
@@ -60,9 +57,11 @@
     "components/z-popover/index.js",
     "components/z-result-card/index.js",
     "components/z-searchbar/index.js",
+    "components/z-select/index.js",
     "components/z-skip-to-content/index.js",
     "components/z-stepper/index.js",
     "components/z-stepper-item/index.js",
+    "components/z-tag/index.js",
     "components/z-toast-notification/index.js",
     "components/z-toast-notification-list/index.js",
     "components/z-toggle-button/index.js",
@@ -70,6 +69,7 @@
     "components/z-tool/index.js",
     "components/z-toolbar/index.js",
     "components/z-tooltip/index.js",
+    "components/z-visually-hidden/index.js",
     "snowflakes/myz/card/z-myz-card/index.js",
     "snowflakes/myz/card/z-myz-card-alert/index.js",
     "snowflakes/myz/card/z-myz-card-body/index.js",