npm - @zanichelli/albe-web-components - Versions diffs - 15.0.1-RC → 15.0.1 - Mend

@zanichelli/albe-web-components 15.0.1-RC → 15.0.1

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

package/dist/collection/components/z-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/F,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzC,MAAM,2BAA2B,GAC/B,oMAAoM,CAAC;AAEvM;;;GAGG;AAMH,MAAM,OAAO,MAAM;;;;;gCAeE,eAAe;2BAIV,KAAK;wBAIR,IAAI;4BAIA,IAAI;;IAUrB,cAAc;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAMO,qBAAqB;QAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;IACvD,CAAC;IAMO,mBAAmB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,OAAO,MAAM,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;YACnD;;mFAEuE;YACvE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;gBAC3B,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;YACrE,CAAC;YACD,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED,iBAAiB;IAEjB,KAAK,CAAC,IAAI;;QACR,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAC;IAC3B,CAAC;IAED,kBAAkB;IAElB,KAAK,CAAC,KAAK;;QACT,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACH,IAAY,iBAAiB;QAC3B,OAAO;YACL,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,2BAA2B,CAAC,CAAC;YAC9F,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,2BAA2B,CAAC,CAAC;SACpF,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;IACtE,CAAC;IAGD,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;QAC5D,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,mBAAmB,IAAI,qBAAqB,IAAI,aAAa,IAAI,qBAAqB,CAAC,EAAE,CAAC;YAC3G,oFAAoF;YACpF,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,mBAAmB,IAAI,oBAAoB,IAAI,aAAa,IAAI,oBAAoB,CAAC,EAAE,CAAC;YACjH,oFAAoF;YACpF,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,qBAAqB,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,CACL,YAAM,IAAI,EAAC,kBAAkB;gBAC3B,4BACc,IAAI,CAAC,gBAAgB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;oBAE3B,cAAQ,IAAI,EAAC,wBAAwB,GAAU,CACxC,CACJ,CACR,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE;gBACL,cAAc,EAAE,CAAC,IAAI,CAAC,YAAY;aACnC,qBACe,aAAa,sBACZ,eAAe,EAChC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAClD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;YAErC,4DACE,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,+BAA+B,EAAE,IAAI,CAAC,YAAY;oBAClD,gCAAgC,EAAE,CAAC,IAAI,CAAC,YAAY;iBACrD,EACD,EAAE,EAAE,IAAI,CAAC,OAAO;gBAEhB,+DAAQ,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC;oBACpD;wBACG,IAAI,CAAC,UAAU,IAAI,2DAAI,EAAE,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM;wBAC9D,IAAI,CAAC,eAAe,EAAE,CACnB;oBACL,IAAI,CAAC,aAAa,IAAI,CACrB,4DACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAC,gBAAgB,IAElB,IAAI,CAAC,aAAa,CACf,CACP,CACM;gBAET,4DACE,KAAK,EAAE;wBACL,6BAA6B,EAAE,IAAI,CAAC,YAAY;wBAChD,8BAA8B,EAAE,CAAC,IAAI,CAAC,YAAY;qBACnD,EACD,EAAE,EAAC,eAAe;oBAElB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACF;YACN,4DACE,KAAK,EAAE;oBACL,kBAAkB,EAAE,IAAI;oBACxB,iCAAiC,EAAE,CAAC,IAAI,CAAC,YAAY;iBACtD,iBACW,iBAAiB,gBACjB,IAAI,CAAC,OAAO,EACxB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC,GACI,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n }\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n }\n }\n\n private handlePageOverflow(): void {\n const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n document.body.style[\"overflow-y\"] = mobileMediaQuery.matches ? \"hidden\" : \"\";\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n\n this.handlePageOverflow();\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && !this.closable) {\n e.preventDefault();\n }\n\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}

package/dist/collection/components/z-modal/styles.css CHANGED Viewed

@@ -49,7 +49,8 @@
 }
 .modal-container > header {
-  padding: calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75)
+    calc(var(--space-unit) * 2);
   background: var(--color-surface02);
 }
@@ -63,8 +64,8 @@
 }
 .modal-container > header z-icon {
-  --z-icon-width: calc(var(--space-unit) * 2.5);
-  --z-icon-height: calc(var(--space-unit) * 2.5);
+  --z-icon-width: calc(var(--space-unit) * 2.25);
+  --z-icon-height: calc(var(--space-unit) * 2.25);
   display: flex;
   fill: var(--color-primary01-icon);
@@ -73,7 +74,7 @@
 .modal-container > header > div {
   display: flex;
   width: 100%;
-  align-items: center;
+  align-items: baseline;
   margin-right: calc(var(--space-unit) * 2);
 }
@@ -82,7 +83,7 @@
   padding: 0;
   margin: 0;
   color: var(--color-default-text);
-  font-weight: var(--font-rg);
+  font-weight: var(--font-sb);
 }
 .modal-container > header h1 {
@@ -93,6 +94,7 @@
 .modal-container > header .subtitle {
   font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
   letter-spacing: 0;
   line-height: 1.5;
 }
@@ -213,34 +215,25 @@
   .modal-dialog::-webkit-scrollbar {
     display: none;
   }
-  .modal-container > header z-icon {
-    --z-icon-width: calc(var(--space-unit) * 3);
-    --z-icon-height: calc(var(--space-unit) * 3);
-  }
-}
-/* Tablet */
-@media only screen and (min-width: 768px) and (max-width: 1151px) {
-  .modal-container > header {
-    padding: calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3);
-  }
 }
 /* Desktop */
 @media only screen and (min-width: 1152px) {
   .modal-container > header {
-    padding: calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4);
+    padding-top: calc(var(--space-unit) * 1.5);
+    padding-bottom: calc(var(--space-unit) * 1.5);
   }
   .modal-container > header h1 {
     font-size: var(--font-size-6);
+    font-weight: var(--font-sb);
     letter-spacing: 0;
-    line-height: 1.33;
+    line-height: 1.333;
   }
   .modal-container > header .subtitle {
     font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
     letter-spacing: 0;
     line-height: 1.5;
   }

package/dist/collection/components/z-stepper/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot - slot for `z-stepper-item`s
+ * @slot - slot for `z-stepper-item`
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: 'c1069a6d199240aa1e8eb9fe30be9a75b2dabecb', role: "list" }, h("slot", { key: '283f1f42d5f73259b7c04e965bf592e4ba543fc8' })));
+        return (h(Host, { key: '80b89caa35e9adb82ad413783b16eae491a26f48', role: "list" }, h("slot", { key: '140e35a55637873b1eee70d5a7a8c2b03af3eed7' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-stepper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n @slot - slot for `z-stepper-item~~`s\~~n */\n@Component({\n tag: \"z-stepper\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepper {\n render(): HTMLSlotElement {\n return (\n <Host role=\"list\">\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n @slot - slot for `z-stepper-item`\n */\n@Component({\n tag: \"z-stepper\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepper {\n render(): HTMLSlotElement {\n return (\n <Host role=\"list\">\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-stepper/index.stories.js CHANGED Viewed

@@ -13,15 +13,18 @@ export const Default = {
       <z-stepper-item
         index="1"
         pressed
-      ></z-stepper-item>
+        >I tuoi dati</z-stepper-item
+      >
       <z-stepper-item
         index="2"
         disabled
-      ></z-stepper-item>
+        >Le tue credenziali</z-stepper-item
+      >
       <z-stepper-item
         index="3"
         disabled
-      ></z-stepper-item>
+        >Conferma</z-stepper-item
+      >
     </z-stepper>`,
 };
 export const Completed = {
@@ -35,4 +38,42 @@ export const Completed = {
       >
     </z-stepper>`,
 };
+export const CompletedDisabled = {
+    render: () => html `<z-stepper>
+      <z-stepper-item
+        index="1"
+        disabled
+        >I tuoi dati</z-stepper-item
+      >
+      <z-stepper-item
+        index="2"
+        disabled
+        >Le tue credenziali</z-stepper-item
+      >
+      <z-stepper-item
+        index="3"
+        pressed
+        >Conferma</z-stepper-item
+      >
+    </z-stepper>`,
+};
+export const Checked = {
+    render: () => html `<z-stepper>
+      <z-stepper-item
+        index="1"
+        checked
+        >I tuoi dati</z-stepper-item
+      >
+      <z-stepper-item
+        index="2"
+        checked
+        >Le tue credenziali</z-stepper-item
+      >
+      <z-stepper-item
+        index="3"
+        checked
+        >Conferma</z-stepper-item
+      >
+    </z-stepper>`,
+};
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-stepper/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA~~;;;;;;;;;;;;;iBAaS~~;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;iBAQS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n title: \"ZStepper/ZStepper\",\n component: \"z-stepper\",\n subcomponents: {\n ZStepperItem: \"z-stepper-item\",\n },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item\n index=\"1\"\n pressed\n ~~></~~z-stepper-item>\n <z-stepper-item\n index=\"2\"\n disabled\n ~~></~~z-stepper-item>\n <z-stepper-item\n index=\"3\"\n disabled\n ~~></~~z-stepper-item>\n </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item index=\"1\">I tuoi dati</z-stepper-item>\n <z-stepper-item index=\"2\">Le tue credenziali</z-stepper-item>\n <z-stepper-item\n index=\"3\"\n pressed\n >Conferma</z-stepper-item\n >\n </z-stepper>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;iBAQS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n title: \"ZStepper/ZStepper\",\n component: \"z-stepper\",\n subcomponents: {\n ZStepperItem: \"z-stepper-item\",\n },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item\n index=\"1\"\n pressed\n >I tuoi dati</z-stepper-item\n >\n <z-stepper-item\n index=\"2\"\n disabled\n >Le tue credenziali</z-stepper-item\n >\n <z-stepper-item\n index=\"3\"\n disabled\n >Conferma</z-stepper-item\n >\n </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item index=\"1\">I tuoi dati</z-stepper-item>\n <z-stepper-item index=\"2\">Le tue credenziali</z-stepper-item>\n <z-stepper-item\n index=\"3\"\n pressed\n >Conferma</z-stepper-item\n >\n </z-stepper>`,\n} satisfies Story;\n\nexport const CompletedDisabled = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item\n index=\"1\"\n disabled\n >I tuoi dati</z-stepper-item\n >\n <z-stepper-item\n index=\"2\"\n disabled\n >Le tue credenziali</z-stepper-item\n >\n <z-stepper-item\n index=\"3\"\n pressed\n >Conferma</z-stepper-item\n >\n </z-stepper>`,\n} satisfies Story;\n\nexport const Checked = {\n render: () =>\n html`<z-stepper>\n <z-stepper-item\n index=\"1\"\n checked\n >I tuoi dati</z-stepper-item\n >\n <z-stepper-item\n index=\"2\"\n checked\n >Le tue credenziali</z-stepper-item\n >\n <z-stepper-item\n index=\"3\"\n checked\n >Conferma</z-stepper-item\n >\n </z-stepper>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-stepper-item/index.stories.js CHANGED Viewed

@@ -3,32 +3,57 @@ import "./index";
 export default {
     title: "ZStepper/ZStepperItem",
     component: "z-stepper-item",
+    args: {
+        pressed: false,
+        disabled: false,
+        checked: false,
+        index: 1,
+        text: "First Item",
+    },
 };
-export const WithIndex = {
-    render: () => html `<z-stepper-item index="1"></z-stepper-item>`,
-};
-export const WithText = {
-    render: () => html `<z-stepper-item index="1">First step</z-stepper-item>`,
-};
-export const Disabled = {
-    render: () => html `<z-stepper-item
-      index="1"
-      disabled
-      >First step</z-stepper-item
+export const Default = {
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 export const Pressed = {
-    render: () => html `<z-stepper-item
-      index="1"
-      pressed
-      >First step</z-stepper-item
+    args: {
+        pressed: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
+    >`,
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 export const Checked = {
-    render: () => html `<z-stepper-item
-      index="1"
-      checked
-      >First step</z-stepper-item
+    args: {
+        checked: true,
+    },
+    render: (args) => html `<z-stepper-item
+      index=${args.index}
+      ?pressed=${args.pressed}
+      ?disabled=${args.disabled}
+      ?checked=${args.checked}
+      >${args.text}</z-stepper-item
     >`,
 };
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-stepper-item/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;~~AAEjB~~,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;~~CACC~~,~~CAAC~~;~~AAE/B~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~SAAS~~,~~GAAG~~;~~IACvB~~,~~MAAM~~,EAAE,~~GAAG~~,EAAE,CAAC,IAAI,~~CAAA~~,~~6CAA6C~~;~~CAChE~~,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,~~QAAQ~~,GAAG;~~IACtB~~,MAAM,EAAE,~~GAAG~~,EAAE,~~CAAC~~,IAAI,CAAA,~~uDAAuD~~;~~CAC1E~~,CAAC;AAEF,MAAM,CAAC,MAAM,~~QAAQ~~,GAAG;~~IACtB~~,MAAM,EAAE,~~GAAG~~,EAAE,~~CACX~~,IAAI,CAAA~~;;;;MAIF~~;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,~~OAAO~~,GAAG;~~IACrB~~,MAAM,EAAE,~~GAAG~~,EAAE,~~CACX~~,IAAI,CAAA~~;;;;MAIF~~;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,~~GAAG~~,EAAE,~~CACX~~,IAAI,CAAA~~;;;;MAIF~~;CACL,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepperItem} from \".\";\nimport \"./index\";\n\nexport default {\n title: \"ZStepper/ZStepperItem\",\n component: \"z-stepper-item\",\n} satisfies Meta<~~ZStepperItem~~>;\n\nexport const ~~WithIndex~~ = {\n render: () => html`<z-stepper-item index~~=\"1~~\~~"></z-stepper-item>`,\~~n};\n\~~nexport const WithText =~~ {\n ~~render: () => html`<~~z-stepper-item ~~index=\"1~~\~~">First step</z-stepper-item~~>`,\n};\n\nexport const ~~Disabled~~ = {\n render: () =>\n html`<z-stepper-item\n index~~=\"1~~\"\n disabled\n ~~>First step~~</z-stepper-item\n >`,\n};\n\nexport const ~~Pressed~~ = {\n render: () =>\n html`<z-stepper-item\n index~~=\"1~~\"\n pressed\n ~~>First step~~</z-stepper-item\n >`,\n};\n\nexport const Checked = {\n render: () =>\n html`<z-stepper-item\n index~~=\"1~~\"\n checked\n ~~>First step~~</z-stepper-item\n >`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAIjB,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,YAAY;KACnB;CACsC,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepperItem} from \".\";\nimport \"./index\";\n\ntype ZStepperItemStoriesArgs = ZStepperItem & {text: string};\n\nexport default {\n title: \"ZStepper/ZStepperItem\",\n component: \"z-stepper-item\",\n args: {\n pressed: false,\n disabled: false,\n checked: false,\n index: 1,\n text: \"First Item\",\n },\n} satisfies Meta<ZStepperItemStoriesArgs>;\n\nexport const Default = {\n render: (args) =>\n html`<z-stepper-item\n index=${args.index}\n ?pressed=${args.pressed}\n ?disabled=${args.disabled}\n ?checked=${args.checked}\n >${args.text}</z-stepper-item\n >`,\n};\n\nexport const Pressed = {\n args: {\n pressed: true,\n },\n render: (args) =>\n html`<z-stepper-item\n index=${args.index}\n ?pressed=${args.pressed}\n ?disabled=${args.disabled}\n ?checked=${args.checked}\n >${args.text}</z-stepper-item\n >`,\n};\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n render: (args) =>\n html`<z-stepper-item\n index=${args.index}\n ?pressed=${args.pressed}\n ?disabled=${args.disabled}\n ?checked=${args.checked}\n >${args.text}</z-stepper-item\n >`,\n};\n\nexport const Checked = {\n args: {\n checked: true,\n },\n render: (args) =>\n html`<z-stepper-item\n index=${args.index}\n ?pressed=${args.pressed}\n ?disabled=${args.disabled}\n ?checked=${args.checked}\n >${args.text}</z-stepper-item\n >`,\n};\n"]}

package/dist/collection/components/z-tag/index.stories.js CHANGED Viewed

@@ -17,22 +17,24 @@ const StoryMeta = {
         "--z-tag-bg": getColorTokenArgConfig(),
     },
     args: {
-        "text": "In progress",
-        "expandable": false,
-        "icon": "gear",
-        "--z-tag-text-color": undefined,
-        "--z-tag-bg": undefined,
+        text: "In progress",
+        expandable: false,
+        icon: "gear",
     },
 };
 export default StoryMeta;
 export const Default = {
     render: (args) => html `<z-tag
-      icon="gear"
+      icon=${args.icon}
       expandable=${args.expandable}
       >${args.text}
     </z-tag>`,
 };
 export const ColorTokens = {
+    args: {
+        "--z-tag-text-color": null,
+        "--z-tag-bg": null,
+    },
     render: (args) => html `<z-tag
       style=${styleMap({
         "--z-tag-text-color": args["--z-tag-text-color"],
@@ -45,7 +47,9 @@ export const ColorTokens = {
 };
 export const LongText = {
     args: {
-        text: "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
+        "text": "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
+        "--z-tag-text-color": null,
+        "--z-tag-bg": null,
     },
     render: (args) => html `<z-tag
       style=${styleMap({

package/dist/collection/components/z-tag/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,~~MAAM~~,EAAE,aAAa;~~QACrB~~,~~YAAY~~,EAAE,KAAK;~~QACnB~~,~~MAAM~~,EAAE,MAAM;~~QACd,oBAAoB,EAAE,SAAS~~;~~QAC/B,YAAY,EAAE,SAAS;KACxB;~~CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA~~;;mBAEW~~,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,~~IAAI~~,EAAE,6EAA6E;~~KACpF~~;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" \| \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n title: \"ZTag\",\n component: \"z-tag\",\n argTypes: {\n \"icon\": {\n control: {\n type: \"select\",\n },\n options: Object.keys(ICONS).sort(),\n },\n \"--z-tag-text-color\": getColorTokenArgConfig(),\n \"--z-tag-bg\": getColorTokenArgConfig(),\n },\n args: {\n \"text\": \"In progress\",\n \"expandable\": false,\n \"icon\": \"gear\",\n ~~\"--z-tag-text-color\": undefined,\n \"--z-tag-bg\": undefined,\n~~ },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-tag\n icon~~=\"gear~~\"\n expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n\nexport const ColorTokens = {\n render: (args) =>\n html`<z-tag\n style=${styleMap({\n \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n \"--z-tag-bg\": args[\"--z-tag-bg\"],\n })}\n .icon=${args.icon}\n .expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n\nexport const LongText = {\n args: {\n text: \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n },\n render: (args) =>\n html`<z-tag\n style=${styleMap({\n \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n \"--z-tag-bg\": args[\"--z-tag-bg\"],\n })}\n .icon=${args.icon}\n .expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,MAAM;KACb;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,6EAA6E;QACrF,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" \| \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n title: \"ZTag\",\n component: \"z-tag\",\n argTypes: {\n \"icon\": {\n control: {\n type: \"select\",\n },\n options: Object.keys(ICONS).sort(),\n },\n \"--z-tag-text-color\": getColorTokenArgConfig(),\n \"--z-tag-bg\": getColorTokenArgConfig(),\n },\n args: {\n text: \"In progress\",\n expandable: false,\n icon: \"gear\",\n },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-tag\n icon=${args.icon}\n expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n\nexport const ColorTokens = {\n args: {\n \"--z-tag-text-color\": null,\n \"--z-tag-bg\": null,\n },\n render: (args) =>\n html`<z-tag\n style=${styleMap({\n \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n \"--z-tag-bg\": args[\"--z-tag-bg\"],\n })}\n .icon=${args.icon}\n .expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n\nexport const LongText = {\n args: {\n \"text\": \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n \"--z-tag-text-color\": null,\n \"--z-tag-bg\": null,\n },\n render: (args) =>\n html`<z-tag\n style=${styleMap({\n \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n \"--z-tag-bg\": args[\"--z-tag-bg\"],\n })}\n .icon=${args.icon}\n .expandable=${args.expandable}\n >${args.text}\n </z-tag>`,\n};\n"]}

package/dist/components/index15.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { g as KeyboardCode } from './index2.js';
+import { m as mobileBreakpoint } from './breakpoints.js';
 import { d as defineCustomElement$1 } from './index9.js';
 // nb. This is for IE10 and lower _only_.
@@ -859,7 +860,7 @@ if (window.HTMLDialogElement === undefined) {
   HTMLFormElement.prototype.submit = replacementFormSubmit;
 }
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::-webkit-backdrop{display:none}:host>dialog::-ms-backdrop{display:none}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:-ms-flexbox;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;-ms-flex-direction:column;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:-ms-flexbox;display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;-ms-flex:1 auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:-webkit-sticky;position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header .subtitle{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::-webkit-backdrop{display:none}:host>dialog::-ms-backdrop{display:none}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:-ms-flexbox;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;-ms-flex-direction:column;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75)\n    calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:-ms-flexbox;display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:baseline;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;-ms-flex:1 auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:-webkit-sticky;position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media only screen and (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
 const ZModalStyle0 = stylesCss;
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
@@ -892,6 +893,10 @@ const ZModal = /*@__PURE__*/ proxyCustomElement(class ZModal extends HTMLElement
             this.modalBackgroundClick.emit({ modalid: this.modalid });
         }
     }
+    handlePageOverflow() {
+        const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+        document.body.style["overflow-y"] = mobileMediaQuery.matches ? "hidden" : "";
+    }
     componentDidLoad() {
         if (typeof window.HTMLDialogElement !== "function") {
             /* workaround to fix `registerDialog` in test environment:
@@ -906,6 +911,7 @@ const ZModal = /*@__PURE__*/ proxyCustomElement(class ZModal extends HTMLElement
         else {
             this.open();
         }
+        this.handlePageOverflow();
     }
     /** open modal */
     async open() {
@@ -933,6 +939,9 @@ const ZModal = /*@__PURE__*/ proxyCustomElement(class ZModal extends HTMLElement
         ].filter((element) => getComputedStyle(element).display !== "none");
     }
     handleKeyDown(e) {
+        if (e.code === KeyboardCode.ESC && !this.closable) {
+            e.preventDefault();
+        }
         if (e.code !== KeyboardCode.TAB) {
             return;
         }
@@ -964,16 +973,16 @@ const ZModal = /*@__PURE__*/ proxyCustomElement(class ZModal extends HTMLElement
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '502c0fd42f37a498ef3ec2b2b174ac4950287883', class: {
+        return (h("dialog", { key: '50df4e07a74c86679fd2243e6795da0eeaae9c2c', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '0dd9496ca11660307bcb8d751e8793659aa30741', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '035ad0b71a6726e43c1fb52dae69257afd054525', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '6952365a4a1d64e1ce23a9454f11cd4ae76e37ca', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'fe219a40167ad9984255885bb189d9a9a0509cd5' }, this.modaltitle && h("h1", { key: '2991d4e6c254160dfe33e3558dc5db4d4dbf0abf', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '5a612bc3eb027b488a37918794c4f24e1991a38d', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '34008ade3d0f05c701b4d94df647086a8de3cd27', class: {
+            }, id: this.modalid }, h("header", { key: '8f9e92a6c41e4dbff647c4140a1efc42adf258a9', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '3521275e24a100ba06c2f259ef239a361a6841e5' }, this.modaltitle && h("h1", { key: '3c345754f355fbe4cb7c0515404b01a3ff647b26', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '5307334b7aca04ae351a0a69cbdaa6ec0ee32654', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'fe5a158f3a0f0d6a06e83ce4cf32fb50ea5bf79f', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '7ce631a687090f9b69bafa8de5dbe76d21d2c554', name: "modalContent" }))), h("div", { key: '8fc40e271bec8219fbbbf208bbba900a74ebdec8', class: {
+            }, id: "modal-content" }, h("slot", { key: 'c2e5855dc48026fda519ad69bf5a7f9c3c1a2773', name: "modalContent" }))), h("div", { key: 'd7f80d8206c262bf5166ee1231d78eb0e55e4bb5', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {