npm - @zanichelli/albe-web-components - Versions diffs - 19.3.0-RC6 → 19.3.0 - Mend

@zanichelli/albe-web-components 19.3.0-RC6 → 19.3.0

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 (1274) hide show

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-fIt9Ytc6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BEHxru6n.js';
 const stylesCss = () => `button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}`;
@@ -21,12 +21,15 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '12715211c2a202659aebbbafce50ef723523e5b5', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: 'd0ffc4e5d939520d394a77bcca9fd980cda11503', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '2e6c9c85c5728eb03116da7b58f13da76abd1cf1', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '7307d3b2b6abbbe555e22e7caa11b6e151146f54', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = stylesCss();
 export { ZToggleButton as z_toggle_button };
+//# sourceMappingURL=z-toggle-button.entry.js.map
+//# sourceMappingURL=z-toggle-button.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-toggle-button.entry.js","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"],"names":[],"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,QACE,CAAA,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,EAErC,CAAA,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;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-fIt9Ytc6.js';
-import { k as LabelPosition } from './index-BKCj6NR2.js';
-import { r as randomId } from './utils-BEzZQwOB.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEHxru6n.js';
+import { k as LabelPosition } from './index-B3nR3-Jw.js';
+import { r as randomId } from './utils-C9lc3rtK.js';
 import './breakpoints-Q-tWjk7P.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}`;
@@ -32,16 +32,19 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '56f9d8ff6eb13dfa9c113cbf6c0938e141d55c67' }, h("input", { key: '3417b90e089286fad9bccb61a5f4b39ae4168f91', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'ddd2fe347095d9551d8881c83a9a88f2a76baa75', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'b88394ed133b9f44f9c1de65628260259e841733' }, h("input", { key: '663c03657be7d0f8470226a11c8a804b2b9cbf86', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '5c234abf4e80459e82df5ae500e257325de80b75', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '8532e35c90ac967e7bd5ba19b6cfb427e30a8a9e' }, h("slot", { key: '013eb019d7033bdf49fc2ca79ec647dc47aa5516' })), h("span", { key: '4aa4b5abb12d819bb253c68f8315baf89935dd70', class: {
+            } }, h("span", { key: '8a8c27808c25b96294c0ee32bc5b0463d961aeb5' }, h("slot", { key: 'a44db8068a726de440173f0779fea34860239ee8' })), h("span", { key: '039860e84314b571f982e4a34bd0f7f257f1acf8', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '1379aa626ccb15cc65337fd09063865051078dfb', class: "circle" }, this.checked && (h("z-icon", { key: 'c69f5f85fd886ae9ab30a559a6db66c1ad4f1db7', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '4fa9b0bb08311cde64570f5cc1de3eb958633cdf', class: "circle" }, this.checked && (h("z-icon", { key: '7f44edf1a91ad6a5c2c1e1d2dc7e9eaf202f14b8', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = stylesCss();
 export { ZToggleSwitch as z_toggle_switch };
+//# sourceMappingURL=z-toggle-switch.entry.js.map
+//# sourceMappingURL=z-toggle-switch.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-toggle-switch.entry.js","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"],"names":[],"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,GAAI,aAAa,CAAC,IAAI;;AAInC,QAAA,IAAA,CAAA,OAAO,GAAa,KAAK;;AAIzB,QAAA,IAAA,CAAA,MAAM,GAAG,oBAAoB,QAAQ,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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,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,EACF,CAAA,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,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACP,CAAA,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,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAA,EACjB,IAAI,CAAC,OAAO,KACX,CAAA,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;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
-import { P as PopoverPosition, g as KeyboardCode } from './index-BKCj6NR2.js';
-import { a as containsElement } from './utils-BEzZQwOB.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { P as PopoverPosition, g as KeyboardCode } from './index-B3nR3-Jw.js';
+import { a as containsElement } from './utils-C9lc3rtK.js';
 import './breakpoints-Q-tWjk7P.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}}`;
@@ -187,10 +187,10 @@ const ZTool = class {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '5adf35d9c14bc55415a5f333f032d07e70c679ce', class: { "z-tool-tooltip-open": this.tooltipOpen } }, 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 }, h("z-icon", { key: '21f9a4e4a429b3d4a8cc294195ebcec03baebdff', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (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 ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'ae88d5b59fe21ec1df190c3599042740c3a76634', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '796d9040bbf935d87b0981d64d6e0404a36189b0', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (h(Host, { key: '877a963cd0017bb4ee4ceee41269a7221c9b5657', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '277956460cb28d4fa82751858e6ec223c60c3742', 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 }, h("z-icon", { key: '7adc9e77129028185370b067f087190c30ce65b1', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '1ad7d42bea522fe09f192f6a5437a56aa1c0dfce', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'aa411388fce8b01983fed63a1c27505a53604a8c', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '018b555d82f0fe05cf1029eabaf645f14f793079', 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 ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'a16a3b105a1488373193752b3c9eeb2eab0dc0c2' })))));
+            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'cc57b7897e2341151ffa771a0c1d7ed22052faf7' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -205,3 +205,6 @@ const ZTool = class {
 ZTool.style = stylesCss() + typographyCss();
 export { ZTool as z_tool };
+//# sourceMappingURL=z-tool.entry.js.map
+//# sourceMappingURL=z-tool.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-tool.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
-import { g as KeyboardCode } from './index-BKCj6NR2.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { g as KeyboardCode } from './index-B3nR3-Jw.js';
 const stylesCss = () => `:host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(         to bottom,         transparent 0,         transparent calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)       )       center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}`;
@@ -129,7 +129,7 @@ const ZToolbar = class {
         }
     }
     render() {
-        return (h(Host, { key: 'da37a1abe86b6c96aaabdc4f5714716ea3ce7281', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '73b950e1efb794a75930915ccb39cf58dc524fb0', onSlotchange: () => {
+        return (h(Host, { key: '27daf25d9526b2eb37ddcec6e3e577b913fae833', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: 'e84a997b04d17fe916ba25ea296c1459228226af', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));
@@ -139,3 +139,6 @@ const ZToolbar = class {
 ZToolbar.style = stylesCss();
 export { ZToolbar as z_toolbar };
+//# sourceMappingURL=z-toolbar.entry.js.map
+//# sourceMappingURL=z-toolbar.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-toolbar.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,0gCAA0gC,CAAC;;MCgBvhC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC;;AAGb,QAAA,IAAA,CAAA,SAAS,GAAuB,EAAE;AA6J3C;IA3JC,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;AAEvB,QAAA,IAAI,iBAAiB,GAAG,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,IAAI,GAAG,CAAC;QACnH,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,iBAAiB;AAC1G,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,QAAQ,EAAE,CAAC;;;IAIjF,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kCAAkC,CAAC,CAAC;;AAGpG;;;AAGG;IACK,gBAAgB,GAAA;QACtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACrC,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,EAAE,CAAC;AAC7D,SAAC,CAAC;;AAGI,IAAA,WAAW,CAAC,KAAa,EAAE,QAAA,GAAgC,MAAM,EAAA;QACvE,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,IAAI,EAAE;YACT;;AAGF,QAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,gBAAgB,EAAE;YAEvB;;AAGF,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,IAAI,CAAC,aAAa,EAAE;;aACf;YACL,IAAI,CAAC,iBAAiB,EAAE;;;IAIpB,aAAa,GAAA;AACnB,QAAA,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM;AACtE,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;IAGrB,iBAAiB,GAAA;QACvB,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM;AAC9F,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,UAAU,CAAC;;AAGzC;;;AAGG;AAEH,IAAA,0BAA0B,CAAC,KAAgC,EAAA;AACzD,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;YACzB;;QAGF,MAAM,UAAU,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAA4B;AAC7F,QAAA,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACvD;;QAGF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;YAC9B,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,EAAE;AACpC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAErB,SAAC,CAAC;;AAGJ;;;AAGG;AAEH,IAAA,0BAA0B,CAAC,KAAgC,EAAA;AACzD,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;YACzB;;AAGF,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM;QAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACxC;;QAGF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAC9B,YAAA,IAAI,IAAI,KAAK,UAAU,EAAE;gBACvB,IAAI,CAAC,YAAY,EAAE;;AAEvB,SAAC,CAAC;;AAIJ,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAqB;AAEhE,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACzD;;QAGF,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;AACxD,QAAA,IAAI,YAAY,KAAK,EAAE,EAAE;AACvB,YAAA,IAAI,CAAC,iBAAiB,GAAG,YAAY;;AAGvC,QAAA,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,YAAY,CAAC,WAAW;gBAC3B,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,aAAa,EAAE;gBACpB;YACF,KAAK,YAAY,CAAC,UAAU;gBAC1B,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,iBAAiB,EAAE;gBACxB;;;AAIN;;;AAGG;AAEH,IAAA,aAAa,CAAC,KAAiB,EAAA;AAC7B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAqB;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;QACjD,IAAI,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,IAAI,CAAC,iBAAiB,EAAE;AACpD,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;YAC9B,IAAI,CAAC,gBAAgB,EAAE;;;IAI3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,SAAS,EAAA,YAAA,EACF,IAAI,CAAC,aAAa,EAAA,EAE9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,YAAY,EAAE,MAAK;gBACjB,IAAI,CAAC,gBAAgB,EAAE;gBACvB,IAAI,CAAC,gBAAgB,EAAE;AACzB,aAAC,EAAA,CACK,CACH;;;;;;;;"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-fIt9Ytc6.js';
-import { P as PopoverPosition } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h } from './index-BEHxru6n.js';
+import { P as PopoverPosition } from './index-B3nR3-Jw.js';
 const stylesCss = () => `:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;
@@ -26,9 +26,12 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (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) }, h("slot", { key: '3608136c1675f0f8823a216ab622af272685e8dc' })));
+        return (h("z-popover", { key: 'f043ce5196097912206ba7430623947af5c453a8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '9589232709b125e27eee40bfa68c497626cb55bf' })));
     }
 };
 ZTooltip.style = stylesCss();
 export { ZTooltip as z_tooltip };
+//# sourceMappingURL=z-tooltip.entry.js.map
+//# sourceMappingURL=z-tooltip.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-tooltip.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,sjBAAsjB,CAAC;;MCYnkB,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQE,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,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,QACE,CAAA,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,EAE3D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACH;;;;;;;"}

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

@@ -1,13 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
-import { r as randomId } from './utils-BEzZQwOB.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { r as randomId } from './utils-C9lc3rtK.js';
 import './z-td.entry.js';
 import './z-th.entry.js';
-import './index-BKCj6NR2.js';
+import './index-B3nR3-Jw.js';
 import './breakpoints-Q-tWjk7P.js';
-const stylesCss$1 = () => `: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}: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-top:var(--border-size-small) solid var(--color-surface03);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(*){border-left:0 !important;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;border:none !important;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 = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+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 +69,7 @@ const ZTr = class {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '6675f95eeb22b498594fba6534c4c827febecc73', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '587ff79c6259984e7cbff6fae284a454152d1cf7', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'fa283ba74f8b62c16b37853031f01d278bb6e707', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'e009923873641b3cecf5f6736e56c7136134f226', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '403d4e5d99c796af9887c8d8f2b4ec8a9de7f9bd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'afc75a162e1782b9aeb746961f0f51686e8c9213', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '92be779ec3e863cc85336fcedb02f718fa3a19fa', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '720c8209c21104e78129cbd76c12a6cdf8806ca2', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302', class: "z-tr--expand-button-container" }, this.expandable && (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" }, h("z-icon", { key: '9fd14fcab4ea512b42c63928c3e2dabb83fd1da3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -80,6 +78,9 @@ const ZTr = class {
             }]
     }; }
 };
-ZTr.style = stylesCss$1() + stylesCss();
+ZTr.style = stylesCss();
 export { ZTr as z_tr };
+//# sourceMappingURL=z-tr.entry.js.map
+//# sourceMappingURL=z-tr.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-tr.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
-import { g as KeyboardCode } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { g as KeyboardCode } from './index-B3nR3-Jw.js';
 const stylesCss = () => `:host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}`;
@@ -110,3 +110,6 @@ const ZTreeList = class {
 ZTreeList.style = stylesCss();
 export { ZTreeList as z_tree_list };
+//# sourceMappingURL=z-tree-list.entry.js.map
+//# sourceMappingURL=z-tree-list.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-tree-list.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-fIt9Ytc6.js';
+import { r as registerInstance, h } from './index-BEHxru6n.js';
 const stylesCss = () => `:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;
@@ -7,9 +7,12 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: 'e1a4d7e8ec823326ce9decd1bcbf5ffc3e2987bf' });
+        return h("slot", { key: 'c0d4c33ff0e304a0e2c6b1f708fb48aaa3f45fc5' });
     }
 };
 ZVisuallyHidden.style = stylesCss();
 export { ZVisuallyHidden as z_visually_hidden };
+//# sourceMappingURL=z-visually-hidden.entry.js.map
+//# sourceMappingURL=z-visually-hidden.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"z-visually-hidden.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,gKAAgK,CAAC;;MCO7K,eAAe,GAAA,MAAA;;;;IAC1B,MAAM,GAAA;QACJ,OAAO,8DAAQ;;;;;;;"}

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

@@ -60,6 +60,10 @@ export type TabItem = {
     selected?: boolean;
     disabled?: boolean;
 };
+export declare enum Orientation {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
 export declare enum NavigationTabsOrientation {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"

package/dist/types/components/z-input-range/index.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { ControlSize, Orientation, PopoverPosition } from "../../beans";
+/**
+ * Input range component.
+ */
+export declare class ZInputRange implements ComponentInterface {
+    host: HTMLZInputRangeElement;
+    internals: ElementInternals;
+    /** Whether the input range is disabled. */
+    disabled: boolean;
+    /**
+     * The aria label of the input range. for accessibility.
+     * Not necessary if the `label` prop is set.
+     */
+    htmlAriaLabel: string;
+    /** ID of the input range. */
+    htmlId: string;
+    /**
+     * The label of the input range.
+     * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.
+     */
+    label: string;
+    /** The greatest value in the range of permitted values. */
+    max: number;
+    /** The lowest value in the range of permitted values. */
+    min: number;
+    /** The orientation of the input range. */
+    orientation: Orientation;
+    /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */
+    showEdges: boolean;
+    /** The size of the input range. Default: `ControlSize.BIG` */
+    size: ControlSize.BIG;
+    /** The step value for the input range. */
+    step: number;
+    /** The value of the input range. */
+    value: number;
+    /**
+     * The position of the tooltip displaying the current value.
+     * Defaults to `top` for horizontal orientation and `left` for vertical orientation.
+     * May be necessary to adjust this prop when the input range is close to the edges of the screen,
+     * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.
+     * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.
+     */
+    valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;
+    /** Emitted when the value of the input range is being changed (`input` native event). */
+    rangeInput: EventEmitter<number>;
+    /** Emitted when the value of the input range has changed (`change` native event). */
+    rangeChange: EventEmitter<number>;
+    /** The current value of the input range synchronized with the native input element. */
+    currentValue: number;
+    /**
+     * Whether to show the tooltip displaying the current value.
+     * The tooltip is shown only when the input range is focused or while the user is changing the value.
+     */
+    showValueTooltip: boolean;
+    /**
+     * Whether the native input value needs to be synced with the component state.
+     * This is necessary when the `step` prop changes, as the browser may round the value,
+     * so we need to update the component state accordingly.
+     */
+    private needsNativeValueSync;
+    private inputRef;
+    private tooltipGuideRef;
+    private get ariaLabel();
+    private get tooltipPosition();
+    private updateCurrentValue;
+    /** Calculates the current ratio of the input range value. */
+    private getCurrentRatio;
+    /** Updates the CSS variables used to color the track progress and tooltip guide position. */
+    private updateProgress;
+    /**
+     * Syncs current value from native input after render-time browser coercions:
+     * when `step` changes, the browser may round the value, so we need to update the component state accordingly.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step
+     */
+    private syncCurrentValueFromNativeInput;
+    private onInput;
+    private onChange;
+    onConstraintsChange(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    render(): any;
+}