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

package/dist/components/z-toggle-button.js

@@ -1,64 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index10.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}";
-const ZToggleButtonStyle0 = stylesCss;
-
-const ZToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toggleClick = createEvent(this, "toggleClick", 7);
-        this.label = undefined;
-        this.isdisabled = false;
-        this.avoidclick = undefined;
-        this.opened = false;
-        this.ariaLabel = "";
-    }
-    emitToggleClick() {
-        if (this.isdisabled) {
-            return;
-        }
-        this.opened = !this.opened;
-        this.toggleClick.emit(this.opened);
-    }
-    render() {
-        return (h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', 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: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
-    }
-    static get style() { return ZToggleButtonStyle0; }
-}, [1, "z-toggle-button", {
-        "label": [1],
-        "isdisabled": [4],
-        "avoidclick": [4],
-        "opened": [1028],
-        "ariaLabel": [1, "aria-label"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-toggle-button", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-toggle-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZToggleButton$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZToggleButton = ZToggleButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZToggleButton, defineCustomElement };
-
-//# sourceMappingURL=z-toggle-button.js.map
+import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,transformTag as i}from"@stencil/core/internal/client";import{d as a}from"./index3.js";const s=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.toggleClick=t(this,"toggleClick",7),this.isdisabled=!1,this.opened=!1,this.ariaLabel=""}emitToggleClick(){this.isdisabled||(this.opened=!this.opened,this.toggleClick.emit(this.opened))}render(){return e("button",{key:"515befc9b764cd14ebf6d229f14c5bd63ce3075b",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()},e("z-icon",{key:"08daf99430ad7614dfcdf37d65e06d11511173ca",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}static get style(){return"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}"}},[1,"z-toggle-button",{label:[1],isdisabled:[4],avoidclick:[4],opened:[1028],ariaLabel:[1,"aria-label"]}]),n=s,l=function(){"undefined"!=typeof customElements&&["z-toggle-button","z-icon"].forEach((o=>{switch(o){case"z-toggle-button":customElements.get(i(o))||customElements.define(i(o),s);break;case"z-icon":customElements.get(i(o))||a()}}))};export{n as ZToggleButton,l as defineCustomElement}

package/dist/components/z-toggle-switch.js

@@ -1,73 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { k as LabelPosition } from './index2.js';
-import { r as randomId } from './utils.js';
-import { d as defineCustomElement$2 } from './index10.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}";
-const ZToggleSwitchStyle0 = stylesCss;
-
-const ZToggleSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ZToggleSwitch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.toggleClick = createEvent(this, "toggleClick", 7);
-        this.disabled = false;
-        this.labelPosition = LabelPosition.LEFT;
-        this.checked = false;
-        this.htmlid = `toggle-switch-id-${randomId()}`;
-    }
-    emitToggleClick() {
-        this.toggleClick.emit({
-            id: this.htmlid,
-            checked: this.checked,
-        });
-    }
-    handleClick(ev) {
-        if (this.disabled) {
-            return;
-        }
-        this.checked = ev.target.checked;
-        this.emitToggleClick();
-    }
-    render() {
-        return (h(Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
-                [this.labelPosition]: true,
-                disabled: this.disabled,
-            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
-                container: true,
-                disabled: this.disabled,
-                checked: this.checked,
-            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
-    }
-    static get style() { return ZToggleSwitchStyle0; }
-}, [6, "z-toggle-switch", {
-        "disabled": [516],
-        "labelPosition": [513, "label-position"],
-        "checked": [1028],
-        "htmlid": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-toggle-switch", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-toggle-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZToggleSwitch$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZToggleSwitch = ZToggleSwitch$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZToggleSwitch, defineCustomElement };
-
-//# sourceMappingURL=z-toggle-switch.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as c,Host as i,transformTag as l}from"@stencil/core/internal/client";import{k as o}from"./index2.js";import{r as a}from"./utils.js";import{d as r}from"./index3.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleClick=s(this,"toggleClick",7),this.disabled=!1,this.labelPosition=o.LEFT,this.checked=!1,this.htmlid="toggle-switch-id-"+a()}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){this.disabled||(this.checked=e.target.checked,this.emitToggleClick())}render(){return c(i,{key:"649d949699af687e76abb261e9b03ce1f7a026a9"},c("input",{key:"c2945e1cf225e36906179d3293ff406ae0114480",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),c("label",{key:"dff9b9345114a37eee42bbc2511308ec37dab71a",htmlFor:this.htmlid,class:{[this.labelPosition]:!0,disabled:this.disabled}},c("span",{key:"906b2848eec4a1708dde43dd766722d3f0a8e59e"},c("slot",{key:"03b3de0d961693081972c5bd9a4607c5110b6e58"})),c("span",{key:"f663add1968576e8a588d1cca9a01caeda1db326",class:{container:!0,disabled:this.disabled,checked:this.checked}},c("span",{key:"e0d00b404810e93b43b5b977b1bf72b4859a0bcc",class:"circle"},this.checked&&c("z-icon",{key:"42b6a12e7cf2fb9e91ab4d06199ed7e5eea2d0fc",width:12,height:12,name:"checkmark"})))))}static get style(){return'.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}'}},[262,"z-toggle-switch",{disabled:[516],labelPosition:[513,"label-position"],checked:[1028],htmlid:[1]}]),g=n,h=function(){"undefined"!=typeof customElements&&["z-toggle-switch","z-icon"].forEach((e=>{switch(e){case"z-toggle-switch":customElements.get(l(e))||customElements.define(l(e),n);break;case"z-icon":customElements.get(l(e))||r()}}))};export{g as ZToggleSwitch,h as defineCustomElement}

package/dist/components/z-tool.js

@@ -1,260 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition, g as KeyboardCode } from './index2.js';
-import { a as containsElement } from './utils.js';
-import { d as defineCustomElement$4 } from './index10.js';
-import { d as defineCustomElement$3 } from './index24.js';
-import { d as defineCustomElement$2 } from './index27.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}}";
-const ZToolStyle0 = stylesCss;
-
-const typographyCss = ":root{--font-family-sans:\"IBM Plex Sans\", sans-serif;--font-family-serif:\"IBM Plex Serif\", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}";
-const ZToolStyle1 = typographyCss;
-
-const ZTool$1 = /*@__PURE__*/ proxyCustomElement(class ZTool extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toggleSubmenu = createEvent(this, "toggleSubmenu", 7);
-        this.toggleTooltip = createEvent(this, "toggleTooltip", 7);
-        /** Indicates if the tool is nested inside another tool. */
-        this.isNested = false;
-        /**
-         * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.
-         */
-        this.handleTooltipOpen = (ev) => {
-            if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target)) {
-                return;
-            }
-            clearTimeout(this.hoverDelay);
-            this.hoverDelay = setTimeout(() => {
-                this.tooltipOpen = true;
-            }, 1000);
-        };
-        /**
-         * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.
-         */
-        this.handleTooltipClose = (ev) => {
-            var _a;
-            if (!this.tooltip || ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest("z-tooltip")) === this.tooltipRef) {
-                return;
-            }
-            clearTimeout(this.hoverDelay);
-            this.tooltipOpen = false;
-        };
-        /**
-         * Handles click events on the tool's button element.
-         * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,
-         * or the first item if no active/selected item is found.
-         */
-        this.handleClick = () => {
-            if (this.disabled || !this.hasSlottedContent) {
-                return;
-            }
-            this.open = !this.open;
-            if (this.open) {
-                const colorPicker = this.hostElement.querySelector(":scope > z-color-picker");
-                if (colorPicker) {
-                    colorPicker.setFocus();
-                    return;
-                }
-                // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.
-                const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)") || this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)"));
-                firstActiveOrEnabledNestedTool === null || firstActiveOrEnabledNestedTool === void 0 ? void 0 : firstActiveOrEnabledNestedTool.setFocus();
-            }
-        };
-        /**
-         * 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).
-         */
-        this.onTooltipOpenChange = (event) => {
-            if (event.target === this.tooltipRef) {
-                return;
-            }
-            this.tooltipOpen = event.detail.open;
-        };
-        this.icon = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = PopoverPosition.TOP;
-        this.htmlAriaLabel = undefined;
-        this.active = false;
-        this.disabled = false;
-        this.open = false;
-        this.indicatorColor = undefined;
-        this.tooltipOpen = false;
-        this.hasSlottedContent = false;
-        this.isMobile = false;
-        this.hasNestedOpenTools = false;
-    }
-    handleOpenChange() {
-        this.toggleSubmenu.emit(this.open);
-    }
-    handleTooltipOpenChange() {
-        this.toggleTooltip.emit(this.tooltipOpen);
-    }
-    /**
-     * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.
-     */
-    handleKeyDown(event) {
-        if (!this.open || this.hasNestedOpenTools) {
-            return;
-        }
-        switch (event.key) {
-            case KeyboardCode.ESC:
-                event.stopPropagation();
-                this.open = false;
-                this.setFocus();
-                break;
-            case KeyboardCode.TAB:
-                if (event.shiftKey && event.target.closest("z-tool:not(:scope)") === this.hostElement) {
-                    this.open = false;
-                }
-                break;
-        }
-    }
-    /**
-     * Close the popover on clicks outside the component, only if there are no nested open tools.
-     * In that case any outside click should close the nested submenu(s) first.
-     */
-    onOutsideClick(event) {
-        const target = event.composedPath()[0];
-        if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {
-            return;
-        }
-        this.open = false;
-    }
-    onNestedToolToggle(ev) {
-        if (ev.target === this.hostElement) {
-            return;
-        }
-        if (ev.detail === true) {
-            this.hasNestedOpenTools = true;
-            return;
-        }
-        this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll("z-tool")).some((tool) => tool.open);
-    }
-    /**
-     * Handles the `colorSelected` event from a nested `z-color-picker` component.
-     * Updates the `indicatorColor` and closes the tool's popover.
-     */
-    handleColorSelected(event) {
-        if (!Array.from(this.hostElement.children).includes(event.target)) {
-            return;
-        }
-        this.indicatorColor = event.detail;
-        this.open = false;
-        this.setFocus();
-    }
-    /**
-     * Close the submenu when focus moves outside the tool.
-     */
-    handleExternalFocusin(ev) {
-        const target = ev.target;
-        if (!containsElement(this.hostElement, target)) {
-            this.open = false;
-        }
-    }
-    /** Focuses the tool's button element. */
-    async setFocus() {
-        if (this.disabled) {
-            return;
-        }
-        setTimeout(() => {
-            var _a;
-            (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
-        }, 50);
-    }
-    /** Sets the tab index of the tool's internal button element. */
-    async setTabIndex(value) {
-        if (!this.buttonRef) {
-            return;
-        }
-        this.buttonRef.tabIndex = this.disabled ? -1 : value;
-    }
-    /** Closes the tooltip. */
-    async closeTooltip() {
-        clearTimeout(this.hoverDelay);
-        this.tooltipOpen = false;
-    }
-    componentWillLoad() {
-        this.hasSlottedContent = this.hostElement.children.length > 0;
-        this.isNested = !!this.hostElement.closest("z-tool:not(:scope)");
-        this.mainToolbar = this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");
-        this.hasNestedOpenTools = !!this.hostElement.querySelector("z-tool[open]");
-        this.mql = matchMedia("(max-width: 767px)");
-        this.onMobileViewChange = (e) => (this.isMobile = e.matches);
-        this.mql.addEventListener("change", this.onMobileViewChange);
-        this.isMobile = this.mql.matches;
-    }
-    disconnectedCallback() {
-        var _a;
-        clearTimeout(this.hoverDelay);
-        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
-    }
-    render() {
-        return (h(Host, { key: '206a8594f395b3be01956358cb59968c69cc1317', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '0ad3f51d384386005f5cd4ca2bdf9e9c9b49c7d2', 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: '67a9360a49a09d6cb715314a610af87aec542608', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '7c66f173dc55e4757302c659d56f8d0acf310b76', 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: '7ceeeb537eb0292e629952da4aa932644a7468cf', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '27fde7bbc6dddb8f081bd47491dc91a70538271a', 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: 'e31fd30c100e732f4aca6b038d277d99b6543589' })))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "tooltipOpen": ["handleTooltipOpenChange"]
-    }; }
-    static get style() { return ZToolStyle0 + ZToolStyle1; }
-}, [1, "z-tool", {
-        "icon": [1],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "htmlAriaLabel": [1, "html-aria-label"],
-        "active": [516],
-        "disabled": [516],
-        "open": [1540],
-        "indicatorColor": [1025, "indicator-color"],
-        "tooltipOpen": [32],
-        "hasSlottedContent": [32],
-        "isMobile": [32],
-        "hasNestedOpenTools": [32],
-        "setFocus": [64],
-        "setTabIndex": [64],
-        "closeTooltip": [64]
-    }, [[0, "keydown", "handleKeyDown"], [16, "click", "onOutsideClick"], [0, "toggleSubmenu", "onNestedToolToggle"], [0, "colorSelected", "handleColorSelected"], [17, "focusin", "handleExternalFocusin"]], {
-        "open": ["handleOpenChange"],
-        "tooltipOpen": ["handleTooltipOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tool", "z-icon", "z-popover", "z-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tool":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTool$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZTool = ZTool$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTool, defineCustomElement };
-
-//# sourceMappingURL=z-tool.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,Host as n,transformTag as s}from"@stencil/core/internal/client";import{P as a,g as r}from"./index2.js";import{a as l}from"./utils.js";import{d as h}from"./index3.js";import{d}from"./index17.js";import{d as f}from"./index27.js";const b=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toggleSubmenu=i(this,"toggleSubmenu",7),this.toggleTooltip=i(this,"toggleTooltip",7),this.tooltipPosition=a.TOP,this.active=!1,this.disabled=!1,this.open=!1,this.tooltipOpen=!1,this.hasSlottedContent=!1,this.isMobile=!1,this.hasNestedOpenTools=!1,this.isNested=!1,this.handleTooltipOpen=t=>{this.tooltip&&!this.open&&this.buttonRef.contains(t.target)&&(clearTimeout(this.hoverDelay),this.hoverDelay=setTimeout((()=>{this.tooltipOpen=!0}),1e3))},this.handleTooltipClose=t=>{var e;this.tooltip&&(null===(e=t.relatedTarget)||void 0===e?void 0:e.closest("z-tooltip"))!==this.tooltipRef&&(clearTimeout(this.hoverDelay),this.tooltipOpen=!1)},this.handleClick=()=>{if(!this.disabled&&this.hasSlottedContent&&(this.open=!this.open,this.open)){const t=this.hostElement.querySelector(":scope > z-color-picker");if(t)return void t.setFocus();const e=this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)")||this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)");null==e||e.setFocus()}},this.onTooltipOpenChange=t=>{t.target!==this.tooltipRef&&(this.tooltipOpen=t.detail.open)}}handleOpenChange(){this.toggleSubmenu.emit(this.open)}handleTooltipOpenChange(){this.toggleTooltip.emit(this.tooltipOpen)}handleKeyDown(t){if(this.open&&!this.hasNestedOpenTools)switch(t.key){case r.ESC:t.stopPropagation(),this.open=!1,this.setFocus();break;case r.TAB:t.shiftKey&&t.target.closest("z-tool:not(:scope)")===this.hostElement&&(this.open=!1)}}onOutsideClick(t){const e=t.composedPath()[0];!this.open||l(this.hostElement,e)||this.hasNestedOpenTools||(this.open=!1)}onNestedToolToggle(t){t.target!==this.hostElement&&(this.hasNestedOpenTools=!0===t.detail||Array.from(this.hostElement.querySelectorAll("z-tool")).some((t=>t.open)))}handleColorSelected(t){Array.from(this.hostElement.children).includes(t.target)&&(this.indicatorColor=t.detail,this.open=!1,this.setFocus())}handleExternalFocusin(t){l(this.hostElement,t.target)||(this.open=!1)}async setFocus(){this.disabled||setTimeout((()=>{var t;null===(t=this.buttonRef)||void 0===t||t.focus()}),50)}async setTabIndex(t){this.buttonRef&&(this.buttonRef.tabIndex=this.disabled?-1:t)}async closeTooltip(){clearTimeout(this.hoverDelay),this.tooltipOpen=!1}componentWillLoad(){this.hasSlottedContent=this.hostElement.children.length>0,this.isNested=!!this.hostElement.closest("z-tool:not(:scope)"),this.mainToolbar=this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)"),this.hasNestedOpenTools=!!this.hostElement.querySelector("z-tool[open]"),this.mql=matchMedia("(max-width: 767px)"),this.onMobileViewChange=t=>this.isMobile=t.matches,this.mql.addEventListener("change",this.onMobileViewChange),this.isMobile=this.mql.matches}disconnectedCallback(){var t;clearTimeout(this.hoverDelay),null===(t=this.mql)||void 0===t||t.removeEventListener("change",this.onMobileViewChange)}render(){return o(n,{key:"06156433751f761198e7287f0592961a2e2dbcee",class:{"z-tool-tooltip-open":this.tooltipOpen}},o("button",{key:"a2dfc63a3d137ec98c8a1e2b830a2406333dd46d",class:"z-tool",type:"button",ref:t=>this.buttonRef=t,"aria-pressed":this.hasSlottedContent?void 0:this.active?"true":"false","aria-expanded":this.hasSlottedContent?this.open?"true":"false":void 0,"aria-haspopup":this.hasSlottedContent?"true":void 0,"aria-label":this.htmlAriaLabel||this.tooltip||void 0,disabled:this.disabled,onClick:this.handleClick,onMouseEnter:this.handleTooltipOpen,onMouseLeave:this.handleTooltipClose,onFocus:this.handleTooltipOpen,onBlur:this.handleTooltipClose},o("z-icon",{key:"767bf8c9905fcf887370a517ddd6bf8c67de5db0",ref:t=>this.iconRef=t,name:this.icon,indicatorColor:this.indicatorColor})),this.tooltip&&o("z-tooltip",{key:"d90d4296d6329ca2ff573deac04db34582831446",class:"z-tool-tooltip",ref:t=>this.tooltipRef=t,bindTo:this.iconRef,open:this.tooltipOpen&&!this.open,position:this.isNested?a.BOTTOM:this.tooltipPosition,dark:!0,onMouseLeave:this.handleTooltipClose,onBlur:this.handleTooltipClose,onOpenChange:this.onTooltipOpenChange},o("span",{key:"f68a1c0f9aab2f578fea0405d9c8f3d4afd39178",class:"body-4"},this.tooltip)),this.hasSlottedContent&&o("z-popover",{key:"e3ad13e2cd8ca8ab1f25ffbe52be6f939a5d5d00",class:"z-tool-submenu",open:this.open,bindTo:this.isMobile&&this.mainToolbar?this.mainToolbar:this.hostElement,center:!0,closable:!1,position:this.isMobile?a.TOP:a.BOTTOM},o("slot",{key:"64050c129cc261c304b10b37f99c68d638e4f89e"})))}get hostElement(){return this}static get watchers(){return{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}}static get style(){return':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}}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}'}},[257,"z-tool",{icon:[1],tooltip:[1],tooltipPosition:[1,"tooltip-position"],htmlAriaLabel:[1,"html-aria-label"],active:[516],disabled:[516],open:[1540],indicatorColor:[1025,"indicator-color"],tooltipOpen:[32],hasSlottedContent:[32],isMobile:[32],hasNestedOpenTools:[32],setFocus:[64],setTabIndex:[64],closeTooltip:[64]},[[0,"keydown","handleKeyDown"],[16,"click","onOutsideClick"],[0,"toggleSubmenu","onNestedToolToggle"],[0,"colorSelected","handleColorSelected"],[17,"focusin","handleExternalFocusin"]],{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}]),g=b,c=function(){"undefined"!=typeof customElements&&["z-tool","z-icon","z-popover","z-tooltip"].forEach((t=>{switch(t){case"z-tool":customElements.get(s(t))||customElements.define(s(t),b);break;case"z-icon":customElements.get(s(t))||h();break;case"z-popover":customElements.get(s(t))||d();break;case"z-tooltip":customElements.get(s(t))||f()}}))};export{g as ZTool,c as defineCustomElement}