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

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

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

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

@@ -1 +0,0 @@

- {"file":"z-toggle-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,iiCAAiiC,CAAC;AACpjC,4BAAe,SAAS;;MCMX,aAAa;;;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,+DACE,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,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,IAAI,CAAC,KAAK,CACJ,EACT;KACH;;;;;;","names":[],"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, 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 {\n /** label text */\n @Prop()\n label: string;\n\n /** disabled status flag (optional) */\n @Prop()\n isdisabled?: boolean = false;\n\n /** avoidclick status flag */\n @Prop()\n avoidclick: boolean;\n\n /** open by default (optional) */\n @Prop({mutable: true})\n opened?: boolean = false;\n\n /** aria-label for the button */\n @Prop()\n ariaLabel = \"\";\n\n /** emitted on toggle button click, returns isOpen */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n if (this.isdisabled) {\n return;\n }\n\n this.opened = !this.opened;\n this.toggleClick.emit(this.opened);\n }\n\n render(): HTMLButtonElement {\n return (\n <button\n tabindex={this.avoidclick ? \"-1\" : \"0\"}\n class={{\n \"isopen\": this.opened,\n \"avoid-clicks\": this.avoidclick,\n }}\n disabled={this.isdisabled}\n aria-expanded={this.opened ? \"true\" : \"false\"}\n aria-label={this.ariaLabel}\n onClick={() => this.emitToggleClick()}\n >\n <z-icon\n name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n {this.label}\n </button>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-toggle-switch.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,25EAA25E,CAAC;AAC96E,4BAAe,SAAS;;MCSX,aAAa;;;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,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,GACrC,EACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,8DAAQ,CACH,EACP,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,KACX,+DACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,EACP;KACH;;;;;;","names":[],"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, 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 {\n /** Disabled flag */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** Label position */\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /** Checked state */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** HTML id attribute to set to the internal checkbox */\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /** Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-tool.entry.js","mappings":"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","names":[],"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 {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} 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 {\n @Element() hostElement: HTMLZToolElement;\n\n /** Tool icon */\n @Prop()\n icon: IconName;\n\n /** Text displayed inside the tooltip. */\n @Prop()\n tooltip?: string;\n\n /** Preferred tooltip position. Defaults to true. */\n @Prop()\n tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n /** Accessible label for the tool trigger. Falls back to tooltip content. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Visual active state. */\n @Prop({reflect: true})\n active = false;\n\n /** Disabled state. */\n @Prop({reflect: true})\n disabled = false;\n\n /** Open state. */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * Color to use to fill the icon's color indicator, if it has one.\n * Can be any valid value for the `fill` svg attribute.\n * The value of this prop is passed down to the `z-icon` component inside the tool.\n *\n * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n */\n @Prop({mutable: true})\n indicatorColor?: string;\n\n @State()\n tooltipOpen = false;\n\n @State()\n hasSlottedContent = false;\n\n @State()\n isMobile = false;\n\n /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n @State()\n hasNestedOpenTools = false;\n\n /** Emitted when the open state changes. */\n @Event()\n toggleSubmenu: EventEmitter;\n\n /** Emitted when the tooltip open state changes. */\n @Event()\n toggleTooltip: EventEmitter;\n\n private buttonRef?: HTMLButtonElement;\n\n private iconRef?: HTMLElement;\n\n private tooltipRef?: HTMLZTooltipElement;\n\n private hoverDelay?: ReturnType<typeof setTimeout>;\n\n /** Indicates if the tool is nested inside another tool. */\n private isNested = false;\n\n /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n private mainToolbar?: HTMLZToolbarElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /**\n * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n */\n private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.hoverDelay = setTimeout(() => {\n this.tooltipOpen = true;\n }, 1000);\n };\n\n /**\n * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n */\n private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n return;\n }\n\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n };\n\n /**\n * Handles click events on the tool's button element.\n * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n * or the first item if no active/selected item is found.\n */\n private handleClick = (): void => {\n if (this.disabled || !this.hasSlottedContent) {\n return;\n }\n\n this.open = !this.open;\n if (this.open) {\n const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n if (colorPicker) {\n colorPicker.setFocus();\n\n return;\n }\n\n // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n firstActiveOrEnabledNestedTool?.setFocus();\n }\n };\n\n /**\n * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n */\n private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n if ((event.target as HTMLElement) === this.tooltipRef) {\n return;\n }\n\n this.tooltipOpen = event.detail.open;\n };\n\n @Watch(\"open\")\n handleOpenChange(): void {\n this.toggleSubmenu.emit(this.open);\n }\n\n @Watch(\"tooltipOpen\")\n handleTooltipOpenChange(): void {\n this.toggleTooltip.emit(this.tooltipOpen);\n }\n\n /**\n * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n */\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.open || this.hasNestedOpenTools) {\n return;\n }\n\n switch (event.key) {\n case KeyboardCode.ESC:\n event.stopPropagation();\n this.open = false;\n this.setFocus();\n break;\n case KeyboardCode.TAB:\n if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n this.open = false;\n }\n break;\n }\n }\n\n /**\n * Close the popover on clicks outside the component, only if there are no nested open tools.\n * In that case any outside click should close the nested submenu(s) first.\n */\n @Listen(\"click\", {target: \"body\"})\n onOutsideClick(event: MouseEvent): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n return;\n }\n\n this.open = false;\n }\n\n @Listen(\"toggleSubmenu\")\n onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n if (ev.target === this.hostElement) {\n return;\n }\n\n if (ev.detail === true) {\n this.hasNestedOpenTools = true;\n\n return;\n }\n\n this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n }\n\n /**\n * Handles the `colorSelected` event from a nested `z-color-picker` component.\n * Updates the `indicatorColor` and closes the tool's popover.\n */\n @Listen(\"colorSelected\")\n handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n return;\n }\n\n this.indicatorColor = event.detail;\n this.open = false;\n this.setFocus();\n }\n\n /**\n * Close the submenu when focus moves outside the tool.\n */\n @Listen(\"focusin\", {target: \"body\", passive: true})\n handleExternalFocusin(ev: FocusEvent): void {\n const target = ev.target as Node;\n if (!containsElement(this.hostElement, target)) {\n this.open = false;\n }\n }\n\n /** Focuses the tool's button element. */\n @Method()\n async setFocus(): Promise<void> {\n if (this.disabled) {\n return;\n }\n\n setTimeout(() => {\n this.buttonRef?.focus();\n }, 50);\n }\n\n /** Sets the tab index of the tool's internal button element. */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n if (!this.buttonRef) {\n return;\n }\n\n this.buttonRef.tabIndex = this.disabled ? -1 : value;\n }\n\n /** Closes the tooltip. */\n @Method()\n async closeTooltip(): Promise<void> {\n clearTimeout(this.hoverDelay);\n this.tooltipOpen = false;\n }\n\n componentWillLoad(): void {\n this.hasSlottedContent = this.hostElement.children.length > 0;\n this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n clearTimeout(this.hoverDelay);\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n render(): HTMLZToolElement {\n return (\n <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n <button\n class=\"z-tool\"\n type=\"button\"\n ref={(el) => (this.buttonRef = el)}\n aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n disabled={this.disabled}\n onClick={this.handleClick}\n onMouseEnter={this.handleTooltipOpen}\n onMouseLeave={this.handleTooltipClose}\n onFocus={this.handleTooltipOpen}\n onBlur={this.handleTooltipClose}\n >\n <z-icon\n ref={(el) => (this.iconRef = el)}\n name={this.icon}\n indicatorColor={this.indicatorColor}\n ></z-icon>\n </button>\n {this.tooltip && (\n <z-tooltip\n class=\"z-tool-tooltip\"\n ref={(el) => (this.tooltipRef = el)}\n bindTo={this.iconRef}\n open={this.tooltipOpen && !this.open}\n position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n dark\n onMouseLeave={this.handleTooltipClose}\n onBlur={this.handleTooltipClose}\n onOpenChange={this.onTooltipOpenChange}\n >\n <span class=\"body-4\">{this.tooltip}</span>\n </z-tooltip>\n )}\n {this.hasSlottedContent && (\n <z-popover\n class=\"z-tool-submenu\"\n open={this.open}\n bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n center\n /* disable auto-close to prevent unwanted close behaviors on mobile,\n when the bound element is the main toolbar */\n closable={false}\n position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n >\n <slot></slot>\n </z-popover>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-toolbar.entry.js","mappings":"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","names":[],"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 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, 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 * @cssprop --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@Component({\n tag: \"z-toolbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToolbar {\n @Element() hostElement: HTMLZToolbarElement;\n\n /** Accessible label for the toolbar. */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Index of the currently focusable item (roving tabindex). */\n @State()\n currentFocusIndex = 0;\n\n /** List of focusable tool elements. */\n private toolItems: HTMLZToolElement[] = [];\n\n componentDidLoad(): void {\n this.collectToolItems();\n this.updateTabIndexes();\n // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n }\n\n /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n private collectToolItems(): void {\n this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n }\n\n /**\n * Update the `tabindex` of all children tools based on the current focus index,\n * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n */\n private updateTabIndexes(): void {\n this.toolItems.forEach((tool, index) => {\n tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n });\n }\n\n private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n const tool = this.toolItems[index];\n if (!tool) {\n return;\n }\n\n this.currentFocusIndex = index;\n if (!tool.disabled) {\n tool.setFocus();\n this.updateTabIndexes();\n\n return;\n }\n\n if (fallback === \"next\") {\n this.focusNextTool();\n } else {\n this.focusPreviousTool();\n }\n }\n\n private focusNextTool(): void {\n const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n this.focusToolAt(nextIndex);\n }\n\n private focusPreviousTool(): void {\n const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n this.focusToolAt(prevIndex, \"previous\");\n }\n\n /**\n * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n * to prevent multiple submenus from being open at the same time.\n */\n @Listen(\"toggleSubmenu\")\n closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n if (!targetTool || !this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool && tool.open) {\n tool.open = false;\n }\n });\n }\n\n /**\n * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n * to prevent multiple tooltips from being open at the same time.\n */\n @Listen(\"toggleTooltip\")\n closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n if (event.detail !== true) {\n return;\n }\n\n const targetTool = event.target;\n if (!this.toolItems.includes(targetTool)) {\n return;\n }\n\n this.toolItems.forEach((tool) => {\n if (tool !== targetTool) {\n tool.closeTooltip();\n }\n });\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n if (!toolElement || !this.toolItems.includes(toolElement)) {\n return;\n }\n\n const focusedIndex = this.toolItems.indexOf(toolElement);\n if (focusedIndex !== -1) {\n this.currentFocusIndex = focusedIndex;\n }\n\n switch (event.key) {\n case KeyboardCode.ARROW_RIGHT:\n event.preventDefault();\n this.focusNextTool();\n break;\n case KeyboardCode.ARROW_LEFT:\n event.preventDefault();\n this.focusPreviousTool();\n break;\n }\n }\n\n /**\n * When focus enters the toolbar, update the current focus index to match the focused tool,\n * so that roving tabindex is in sync with actual focus.\n */\n @Listen(\"focusin\")\n handleFocusIn(event: FocusEvent): void {\n const target = event.target as HTMLElement;\n const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n const index = this.toolItems.indexOf(toolElement);\n if (index !== -1 && index !== this.currentFocusIndex) {\n this.currentFocusIndex = index;\n this.updateTabIndexes();\n }\n }\n\n render(): HTMLZToolbarElement {\n return (\n <Host\n role=\"toolbar\"\n aria-label={this.htmlAriaLabel}\n >\n <slot\n onSlotchange={() => {\n this.collectToolItems();\n this.updateTabIndexes();\n }}\n ></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-tooltip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,wjBAAwjB,CAAC;AAC3kB,uBAAe,SAAS;;MCeX,QAAQ;;;;wBAGS,eAAe,CAAC,IAAI;oBAIzC,KAAK;oBAML,KAAK;;wBAcD,IAAI;;IAYf,mBAAmB;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACjC;IAED,MAAM;QACJ,QACE,kEACE,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,QACN,SAAS,QACT,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAE3D,8DAAa,CACH,EACZ;KACH;;;;;;","names":[],"sources":["src/components/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/z-tooltip/index.tsx"],"sourcesContent":[":host {\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, 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 * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n tag: \"z-tooltip\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTooltip {\n /** Tooltip position. */\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /** Enable tooltip dark mode. */\n @Prop({reflect: true})\n dark = false;\n\n /**\n * The open state of the tooltip.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the tooltip.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Reflects `closable` prop of the popover.\n * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n */\n @Prop()\n closable = true;\n\n /**\n * Propagation of the `openChange` event from the internal `z-popover` to allow listening to it directly on `z-tooltip`.\n * This is necessary to keep the internal state of the `open` prop in sync when the popover is closed by user interaction instead of programmatically.\n */\n @Event()\n openChange: EventEmitter<{open: boolean}>;\n\n private popoverEl: HTMLZPopoverElement;\n\n @Listen(\"openChange\")\n onPopoverOpenChange(): void {\n this.open = this.popoverEl.open;\n }\n\n render(): HTMLZPopoverElement {\n return (\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.bindTo}\n open={this.open}\n position={this.position}\n closable={this.closable}\n center\n showArrow\n onOpenChange={(event) => this.openChange.emit(event.detail)}\n >\n <slot></slot>\n </z-popover>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +0,0 @@
1	- {"file":"z-tr.entry.js","mappings":";;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-tree-list.entry.js","mappings":"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","names":[],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n}\n\nz-list-element {\n position: relative;\n display: block;\n padding-top: var(--space-unit);\n}\n\nz-list-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, 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 {\n @Element() host: HTMLZTreeListElement;\n\n /** Items to render, if they have the url property they will be rendered as clickable links */\n @Prop()\n items: TreeListItem[] | string = [];\n\n /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n @Prop({reflect: true})\n htmlAriaLabelledby: string;\n\n /** Used for aria-label attribute, sets name in \"tree\" */\n @Prop({reflect: true})\n htmlSectionTitle: string;\n\n /** Emitted on item click, it return the id, name and url of the clicked item */\n @Event()\n treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n private parsedItems: TreeListItem[] = [];\n\n private htmlTag: string;\n\n @Watch(\"items\")\n watchItems(): void {\n this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n private handleClick(item: TreeListItem): void {\n this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n }\n\n private getFocusableElements(): HTMLElement[] {\n return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n }\n\n private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n let ancestor: HTMLElement | null = element;\n\n for (let i = 0; i < levels; i++) {\n ancestor = ancestor?.parentElement;\n if (!ancestor) {\n return;\n }\n }\n\n return ancestor;\n }\n\n private handleArrowNav(event: KeyboardEvent): void {\n if (event.code === KeyboardCode.TAB) {\n event.preventDefault();\n\n return;\n }\n\n const focusableElements = this.getFocusableElements();\n const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n if (currentIndex === -1) {\n return;\n }\n\n if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n event.preventDefault();\n\n const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n return;\n }\n\n focusableElements[nextIndex].focus();\n }\n\n if (event.code === KeyboardCode.ARROW_LEFT) {\n event.preventDefault();\n const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n if (\n !ancestor ||\n !ancestor.children[0] ||\n (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n ) {\n return;\n }\n\n (ancestor.children[0] as HTMLElement).focus();\n }\n\n if (event.code === KeyboardCode.ARROW_RIGHT) {\n event.preventDefault();\n\n const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n if (!parentElm) {\n return;\n }\n\n const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n if (!childrenContainer) {\n return;\n }\n\n const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n if (!firstChild) {\n return;\n }\n\n firstChild.focus();\n }\n }\n\n private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n this.htmlTag = item.url ? \"a\" : \"span\";\n\n const treeListContent = (\n <z-list-element\n id={key}\n class={!item.icon ? \"no-icon-elm\" : \"\"}\n clickable={Boolean(item.url)}\n hasTreeItems={true}\n role=\"none\"\n aria-hidden={undefined}\n >\n <this.htmlTag\n class={{\n \"list-element\": true,\n \"z-link\": Boolean(item.url),\n \"link-clickable\": Boolean(item.url),\n }}\n tabIndex={item.url ? 0 : -1}\n onClick={() => this.handleClick(item)}\n onKeyUp={(event: KeyboardEvent) => {\n if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n this.handleClick(item);\n }\n }}\n onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n role={item.url ? \"treeitem\" : undefined}\n aria-hidden={item.url ? undefined : \"true\"}\n aria-expanded={item.children?.length > 0 && true}\n aria-level={level}\n aria-label={item.name}\n href={item.url}\n >\n <span class=\"item ellipsis\">\n {item.icon && (\n <z-icon\n width={16}\n height={16}\n fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class={{\n \"item-label\": true,\n \"no-icon-label\": !item.icon,\n \"bold-item\": item.bold,\n }}\n title={item.name}\n >\n {item.name}\n </span>\n </span>\n </this.htmlTag>\n {item.children?.length > 0 && (\n <z-list role=\"group\">\n <div class=\"children-node\">\n {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n </div>\n </z-list>\n )}\n </z-list-element>\n );\n\n return treeListContent;\n }\n\n render(): HTMLZTreeListElement {\n const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n return (\n <Host\n class=\"tree-list\"\n role={hasClickableItems ? \"navigation\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-labelledby={this.htmlAriaLabelledby}\n >\n <div\n tabIndex={-1}\n role={hasClickableItems ? \"tree\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-label={this.htmlSectionTitle}\n >\n {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@

- {"file":"z-visually-hidden.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kKAAkK,CAAC;AACrL,8BAAe,SAAS;;MCMX,eAAe;;;;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;","names":[],"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, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-visually-hidden\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZVisuallyHidden {\n render(): HTMLSlotElement {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/types/__mocks__/fileMock.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- declare const _default: "test-file-stub";
2	- export default _default;

package/dist/types/components/book-card/z-book-card/index.stories.d.ts DELETED Viewed

@@ -1,50 +0,0 @@
-import { ZBookCard } from ".";
-import { BookCardVariant } from "../../../beans";
-import { CSSVarsArguments } from "../../../utils/storybook-utils";
-import "../../z-button/index";
-import "../../z-icon/index";
-import "../../z-tag/index";
-import "../z-book-card-app/index";
-import "./index";
-type ZBookCardStoriesArgs = ZBookCard & CSSVarsArguments<"--z-book-card-portrait-cover-height" | "--z-book-card-title-lines" | "--z-book-card-title-word-break" | "--z-book-card-subtitle-lines" | "--z-book-card-subtitle-word-break" | "--z-book-card-authors-lines" | "--z-book-card-authors-word-break">;
-declare const StoryMeta: {
-    title: string;
-    component: string;
-    argTypes: {
-        variant: {
-            control: {
-                type: "inline-radio";
-            };
-            options: BookCardVariant[];
-        };
-    };
-    args: {
-        variant: BookCardVariant.LANDSCAPE;
-        cover: string;
-        operaTitle: string;
-        volumeTitle: string;
-        authors: string;
-        isbn: string;
-        isbnLabel: string;
-        year: string;
-        ebookUrl: string;
-        fallbackCover: string;
-        titleHtmlTag: any;
-        hasMultipleCovers: false;
-        linkTarget: string;
-        "--z-book-card-portrait-cover-height": string;
-        "--z-book-card-title-lines": string;
-        "--z-book-card-title-word-break": string;
-        "--z-book-card-subtitle-lines": string;
-        "--z-book-card-subtitle-word-break": string;
-        "--z-book-card-authors-lines": string;
-        "--z-book-card-authors-word-break": string;
-    };
-};
-export default StoryMeta;
-export declare const Card: {
-    render: (args: ZBookCardStoriesArgs) => import("lit-html").TemplateResult<1>;
-};
-export declare const WithSlottedContent: {
-    render: (args: ZBookCardStoriesArgs) => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/book-card/z-book-card-app/index.stories.d.ts DELETED Viewed

@@ -1,39 +0,0 @@
-import { ZBookCardApp } from ".";
-import { CSSVarsArguments } from "../../../utils/storybook-utils";
-import "../../z-button/index";
-import "../../z-icon/index";
-import "../../z-tag/index";
-import "../z-book-card-app/index";
-import "./index";
-type ZBookCardAppStoriesArgs = ZBookCardApp & CSSVarsArguments<"z-book-card-app-padding-x" | "z-book-card-app-padding-y">;
-declare const StoryMeta: {
-    title: string;
-    component: string;
-    argTypes: {
-        "--z-book-card-app-padding-x": {
-            control: {
-                type: "text";
-            };
-        };
-        "--z-book-card-app-padding-y": {
-            control: {
-                type: "text";
-            };
-        };
-    };
-    args: {
-        logo: string;
-        name: string;
-        laz: true;
-        info: string;
-        link: string;
-    };
-};
-export default StoryMeta;
-export declare const CardApp: {
-    args: {
-        "--z-book-card-app-padding-x": any;
-        "--z-book-card-app-padding-y": any;
-    };
-    render: (args: ZBookCardAppStoriesArgs) => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/css-components/z-fab/index.stories.d.ts DELETED Viewed

@@ -1,63 +0,0 @@
-import "../../z-icon/index";
-import "./index.stories.css";
-/**
- * You can use the `.z-fab` class on a `<button>` or `<a>` with some additional configuration class:
- * - Sizes: `.z-fab-small`, `.z-fab-x-small`. Default with no size classes, is `big`
- * - Color variants: `.z-fab-primary03`, `.z-fab-surface01`, `.z-fab-surface02`, `.z-fab-surface04`. Default with no color classes, is `primary01`
- * - `.z-fab-extended`: show the label (if any) near the icon
- * - `.z-fab-extendable`: label will be shown only on mouse hover and only on desktop viewports (don't add the `.z-fab-extended` class in this case)
- *
- * Some css custom properties are also available to customize the component:
- * - `--z-fab-right-offset`: the right offset of the fab button (Default: `--grid-margin`)
- * - `--z-fab-bottom-offset`: the bottom offset of the fab button (Default: `--grid-margin`)
- * - `--z-fab-icon-size`: the size of the icon (Default: `20px`)
- * - `--z-fab-icon-fill`: the fill color of the icon (Default: `--color-inverse-icon`)
- *
- * > NB: for the `extended` and `extendable` versions, always wrap the text of the label with some element (e.g. a `<span>`).
- */
-declare const _default: {
-    title: string;
-    argTypes: {
-        icon: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        size: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        colorVariant: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-    args: {
-        colorVariant: string;
-        icon: string;
-        label: string;
-        size: string;
-        "z-fab-extendable": boolean;
-        "z-fab-extended": boolean;
-    };
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default _default;
-export declare const Default: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
-};
-/**
- * Multiple ZFab can be used in the same page (max 3), but only one can be "default". The other ones must have a smaller size and can't have the text.
- * You can space them by setting the `--z-fab-bottom-offset` CSS prop.
- */
-export declare const Multiple: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/css-components/z-label/index.stories.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    argTypes: {};
-    args: {};
-};
-export default _default;
-export declare const Default: {
-    render: () => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/css-components/z-link/index.stories.d.ts DELETED Viewed

@@ -1,45 +0,0 @@
-import "../../z-icon/index";
-import "./index.stories.css";
-declare const _default: {
-    title: string;
-    argTypes: {
-        colorVariant: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        icon: {
-            options: string[];
-            control: {
-                type: string;
-                labels: {
-                    null: string;
-                };
-            };
-        };
-        "z-link-icon": {
-            if: {
-                arg: string;
-                truthy: boolean;
-            };
-        };
-    };
-    args: {
-        colorVariant: string;
-        text: string;
-        icon: any;
-        "z-link-active": boolean;
-        "z-link-disabled": boolean;
-        "z-link-underline": boolean;
-        "z-link-icon": boolean;
-        "z-link-sb": boolean;
-    };
-};
-export default _default;
-export declare const ZLink: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
-};
-export declare const ZLinkButton: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/css-components/z-scrollbar/index.stories.d.ts DELETED Viewed

@@ -1,57 +0,0 @@
-import "./index.stories.css";
-/**
- * <p>If applied to elements with CSS property "overflow:scroll", the class will apply to both the vertical AND the horizontal scrollbars. To avoid this, use "overflow-y" instead.</p>
- * Bear in mind that the scrollbar behaves in different ways depending on the browser: <br />
- *    <ul>
- *      <li>Chrome desktop + Android + MS Edge + opera:
- *        <ul>
- *          <li>primary color scrollbar thumb with right angles</li>
- *          <li>gray scrollbar track</li>
- *          <li>thumb gets darker on hover</li>
- *          <li>thumb doesn't bounce when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on Mac + chromium 69 (booktab):
- *        <ul>
- *          <li>thumb bounces when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on iPad:
- *        <ul>
- *          <li>no scrollbars</li>
- *        </ul>
- *      </li>
- *      <li>Chrome on iPad:
- *        <ul>
- *          <li>gray, narrower thumb</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Firefox desktop:
- *        <ul>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *          <li>thumb gets wider on hover</li>
- *        </ul>
- *      </li>
- *      <li>Firefox on Android:
- *        <ul>
- *          <li>th scrollbar disappears if you're not actively scrolling</li>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Samsung browser:
- *        <ul>
- *          <li>no side margins</li>
- *        </ul>
- *      </li>
- *    </ul>
- */
-declare const StoryMeta: {
-    title: string;
-};
-export default StoryMeta;
-export declare const Default: {
-    render: () => import("lit-html").TemplateResult<1>;
-};

package/dist/types/components/date-picker/z-date-picker/index.stories.d.ts DELETED Viewed

@@ -1,33 +0,0 @@
-import { StoryObj } from "@storybook/web-components";
-import { type ZDatePicker } from ".";
-import { ZDatePickerMode } from "../../../beans";
-import "../../z-button/index";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.
- * This component emits an event called `dateSelect` with the value of the selected date.
- */
-declare const StoryMeta: {
-    title: string;
-    component: string;
-    argTypes: {
-        mode: {
-            options: ZDatePickerMode[];
-            control: {
-                type: "inline-radio";
-            };
-        };
-    };
-    args: {
-        ariaLabel: string;
-        mode: ZDatePickerMode.DATE;
-    };
-    render: (args: ZDatePicker) => import("lit-html").TemplateResult<1>;
-};
-export default StoryMeta;
-type Story = StoryObj<ZDatePicker>;
-export declare const Date: Story;
-export declare const DateAndTime: Story;
-export declare const MonthsOnly: Story;
-export declare const CustomToggle: Story;

package/dist/types/components/date-picker/z-range-picker/index.stories.d.ts DELETED Viewed

@@ -1,51 +0,0 @@
-import { ZRangePicker } from ".";
-import { ZRangePickerMode } from "../../../beans";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `rangePickerId` prop.
- * This component has a callback function `dateSelect` that returns the selected date.
- */
-declare const StoryMeta: {
-    title: string;
-    component: string;
-    argTypes: {
-        mode: {
-            options: ZRangePickerMode[];
-            control: {
-                type: "inline-radio";
-            };
-        };
-    };
-};
-export default StoryMeta;
-export declare const Date: {
-    args: {
-        mode: ZRangePickerMode.DATE;
-        rangePickerId: string;
-        firstLabel: string;
-        firstAriaLabel: string;
-        secondLabel: string;
-        secondAriaLabel: string;
-        firstPickerPlaceholder: string;
-        lastPickerPlaceholder: string;
-        firstPickerReadOnly: false;
-        lastPickerReadOnly: false;
-    };
-    render: (args: ZRangePicker) => import("lit-html").TemplateResult<1>;
-};
-export declare const DateAndTime: {
-    args: {
-        mode: ZRangePickerMode.DATE_TIME;
-        rangePickerId: string;
-        firstLabel: string;
-        firstAriaLabel: string;
-        secondLabel: string;
-        secondAriaLabel: string;
-        firstPickerPlaceholder: string;
-        lastPickerPlaceholder: string;
-        firstPickerReadOnly: false;
-        lastPickerReadOnly: false;
-    };
-    render: (args: ZRangePicker) => import("lit-html").TemplateResult<1>;
-};