npm - @pine-ds/core - Versions diffs - 3.9.0 → 3.11.0 - Mend

@pine-ds/core 3.9.0 → 3.11.0

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

Files changed (832) hide show

package/components/pds-link2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-link2.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,u/CAAu/C;;MCc7/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,~~GAAA;;;;~~AAgBE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAqD5C;IA9CS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AAEjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,MAAM,EAAE,0BAA0B;SACnC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAEnD,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;AAEJ,QAAA,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--color, var(--pine-color-text));\n display: inline-flex;\n font-weight: var(--pine-font-weight-medium);\n\n &:focus-visible {\n border-radius: var(--pine-dimension-2xs);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width-thick);\n position: relative;\n }\n\n &:hover {\n color: var(--color, var(--pine-color-text-hover));\n text-decoration: none;\n }\n\n :host([color=\"secondary\"]) & {\n color: var(--pine-color-text-primary);\n\n &:hover {\n color: var(--pine-color-grey-150);\n }\n }\n\n :host([color=\"accent\"]) & {\n color: var(--pine-color-accent);\n\n &:hover {\n color: var(--pine-color-accent-hover);\n }\n }\n\n :host([color=\"danger\"]) & {\n color: var(--pine-color-danger);\n\n &:hover {\n color: var(--pine-color-danger-hover);\n }\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--pine-font-size-body-xs);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--md {\n font-size: var(--pine-font-size-body-sm);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--lg {\n font-size: var(--pine-font-size-body-md);\n\n pds-icon {\n height: var(--pine-dimension-sm);\n width: var(--pine-dimension-sm);\n }\n}\n\n.pds-link--plain {\n text-decoration: none;\n\n &:hover {\n color: var(--pine-color-text-hover);\n text-decoration: underline;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/*\n @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the href will be used as a fallback.\n /\n@Component({\n tag: 'pds-link',\n styleUrls: ['pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /\n Sets the link color.\n /\n @Prop() color?: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether the link should open in a new tab.\n * @defaultValue false\n /\n @Prop() external = false;\n\n /\n Sets the link variant styles.\n * @defaultValue inline\n /\n @Prop() variant: 'inline' \| 'plain' = 'inline';\n\n /\n The font size of the link's text.\n * @defaultValue lg\n /\n @Prop() fontSize: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /\n The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n private setLinkStyles() {\n if (!this.color) return;\n\n const linkColors = {\n secondary: 'var(--pine-color-text-primary)',\n accent: 'var(--pine-color-accent)',\n danger: 'var(--pine-color-danger)',\n }\n\n const linkStyles = setColor(this.color, linkColors);\n\n return linkStyles;\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n part=\"link\"\n target={this.external ? '_blank' : undefined}\n style={this.setLinkStyles()}\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-link2.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,u/CAAu/C;;MCc7/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAgBE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAqD5C;IA9CS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AAEjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,MAAM,EAAE,0BAA0B;SACnC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAEnD,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;AAEJ,QAAA,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--color, var(--pine-color-text));\n display: inline-flex;\n font-weight: var(--pine-font-weight-medium);\n\n &:focus-visible {\n border-radius: var(--pine-dimension-2xs);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width-thick);\n position: relative;\n }\n\n &:hover {\n color: var(--color, var(--pine-color-text-hover));\n text-decoration: none;\n }\n\n :host([color=\"secondary\"]) & {\n color: var(--pine-color-text-primary);\n\n &:hover {\n color: var(--pine-color-grey-150);\n }\n }\n\n :host([color=\"accent\"]) & {\n color: var(--pine-color-accent);\n\n &:hover {\n color: var(--pine-color-accent-hover);\n }\n }\n\n :host([color=\"danger\"]) & {\n color: var(--pine-color-danger);\n\n &:hover {\n color: var(--pine-color-danger-hover);\n }\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--pine-font-size-body-xs);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--md {\n font-size: var(--pine-font-size-body-sm);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--lg {\n font-size: var(--pine-font-size-body-md);\n\n pds-icon {\n height: var(--pine-dimension-sm);\n width: var(--pine-dimension-sm);\n }\n}\n\n.pds-link--plain {\n text-decoration: none;\n\n &:hover {\n color: var(--pine-color-text-hover);\n text-decoration: underline;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/*\n @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the href will be used as a fallback.\n /\n@Component({\n tag: 'pds-link',\n styleUrls: ['pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /\n Sets the link color.\n /\n @Prop() color?: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether the link should open in a new tab.\n * @defaultValue false\n /\n @Prop() external = false;\n\n /\n Sets the link variant styles.\n * @defaultValue inline\n /\n @Prop() variant: 'inline' \| 'plain' = 'inline';\n\n /\n The font size of the link's text.\n * @defaultValue lg\n /\n @Prop() fontSize: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /\n The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n private setLinkStyles() {\n if (!this.color) return;\n\n const linkColors = {\n secondary: 'var(--pine-color-text-primary)',\n accent: 'var(--pine-color-accent)',\n danger: 'var(--pine-color-danger)',\n }\n\n const linkStyles = setColor(this.color, linkColors);\n\n return linkStyles;\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n part=\"link\"\n target={this.external ? '_blank' : undefined}\n style={this.setLinkStyles()}\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"version":3}

package/components/pds-loader2.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const pdsLoaderCss = ":host{--loader-color:var(--pine-color-brand);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--loader-color)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}";
 const PdsLoader = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * If false, the loader will be hidden.
@@ -51,7 +53,7 @@ const PdsLoader = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLE
         return (h(Host, { key: 'd648f1d95f06915b3192955f78c9a4ba459adf3d', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'a1152f82ddffc3ff18ac23f522432e73eaa4051e', class: "pds-loader--spinner" }, h("svg", { key: 'd313737376105c1d74fd8bd006d18499294e99d7', style: this.style(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '756278ffc85e9aaeb91ba451ad21810131431f99' }, h("linearGradient", { key: '17c8edf68002c4d73012eb040dbe1a349199894d', id: "spinner-secondHalf" }, h("stop", { key: '3610ebe3ac877590905e61de933c564a89ef2342', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'bce6d94cebf01f7f5a5bd46477dace921390ed35', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '3ea22a61e3a871fe09df54f07c7f51cff8f84fb0', id: "spinner-firstHalf" }, h("stop", { key: '40a3dc4d486b9caa23f219503fd70cca44421d33', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'ecc86f15149dd7fbd49311463c28ca2e2e7106ed', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '0a9f8307abd79d39d665b94c7b7273f8768b2d89', class: "pds-loader__spinner-path" }, h("path", { key: '8c87a83b7fb89345d5357559c3b5485d08b89518', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'b4a1aebf06c2b47fcdeb8b822ea27d893c855280', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '5a1880eba9eec32622b2353d78bef605519d7235', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '4864108fd2d7aa7c163302950e54083901cdf5d7', class: "pds-loader--typing" }, h("span", { key: '6b71380af9b30e99a4819e081d0e7b7d8f2f9eb2' }), h("span", { key: '8f64d209593c813e71a4858c9ccb0aaa2c4eef4a' }), h("span", { key: '15ccbc6661214218f15d624bced8370609c6c232' }))), h("div", { key: 'd26ce663fbf08163764e70236b742b3d12c4b950', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '10562b45b4917c88dda50d5ebe24169421a193dc', name: "label" }, "Loading..."))));
     }
     static get style() { return pdsLoaderCss; }
-}, [1, "pds-loader", {
+}, [257, "pds-loader", {
         "isLoading": [4, "is-loading"],
         "showLabel": [4, "show-label"],
         "size": [513],

package/components/pds-loader2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-loader2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,68EAA68E;;MCYr9E,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,~~GAAA;;;;~~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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n --loader-color: var(--pine-color-brand);\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n --number-spinner-timing: 2s;\n --number-spinner-path-timing: 1.5s;\n\n animation: rotate var(--number-spinner-timing) linear infinite;\n color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n stroke-width: 8px;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n// Typing Loader\n.pds-loader--typing {\n --number-typing-timing: 1s;\n\n --opacity-typing-dot-default: 0.4;\n --opacity-typing-dot-active: 1;\n\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-sm);\n box-shadow: var(--pine-box-shadow);\n display: inline-flex;\n gap: var(--pine-dimension-2xs);\n margin-block: var(--pine-dimension-none);\n margin-inline: auto;\n padding-block: 15px;\n padding-inline: 20px;\n position: relative;\n\n span {\n background-color: var(--pine-color-border-hover);\n block-size: 6px;\n border-radius: var(--pine-border-radius-full);\n inline-size: 6px;\n opacity: var(--opacity-typing-dot-default);\n\n @for $i from 1 through 3 {\n &:nth-of-type(#{$i}) {\n animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n }\n }\n }\n}\n\n@keyframes typing {\n 50% {\n opacity: var(--opacity-typing-dot-active);\n transform: scale(1.25);\n }\n}\n\n.pds-loader__label {\n --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/*\n @part loader-svg - Exposes the spinner SVG element for color customization.\n * @slot label - Default slot for Loader label text.\n /\n\n@Component({\n tag: 'pds-loader',\n styleUrls: ['pds-loader.scss'],\n shadow: true,\n})\nexport class PdsLoader {\n /\n If false, the loader will be hidden.\n /\n @Prop() isLoading: boolean = true;\n\n /\n Determines whether the loader should display a label.\n /\n @Prop() showLabel?: boolean = false;\n\n /\n Sets the size of the spinner loader. Value can be preset or custom.\n /\n @Prop({ reflect: true }) size?:\n \| 'xs' // 24px\n \| 'sm' // 32px\n \| 'md' // 48px\n \| 'lg' // 64px\n \| 'xl' // 80px\n \| string = 'md';\n\n /\n Determines the type of loader.\n */\n @Prop() variant: 'spinner' \| 'typing' = 'spinner';\n\n private loaderSize() {\n const sizes: { [key: string]: string } = {\n xs: '24px',\n sm: '32px',\n md: '48px',\n lg: '64px',\n xl: '80px',\n };\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size;\n }\n }\n\n private style = () => {\n if (this.size !== undefined) {\n return {\n height: this.loaderSize(),\n width: this.loaderSize(),\n };\n }\n };\n\n render() {\n return (\n <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n {this.variant === 'spinner' && (\n <div class=\"pds-loader--spinner\">\n <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\" part=\"loader-svg\">\n <defs>\n <linearGradient id=\"spinner-secondHalf\">\n <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n <linearGradient id=\"spinner-firstHalf\">\n <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n </defs>\n\n <g class=\"pds-loader__spinner-path\">\n <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n </g>\n </svg>\n </div>\n )}\n\n {this.variant === 'typing' && (\n <div class=\"pds-loader--typing\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n )}\n\n <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n <slot name=\"label\">Loading...</slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-loader2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n --loader-color: var(--pine-color-brand);\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Default Loader\n.pds-loader--spinner svg {\n --number-spinner-timing: 2s;\n --number-spinner-path-timing: 1.5s;\n\n animation: rotate var(--number-spinner-timing) linear infinite;\n color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n stroke-width: 8px;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n// Typing Loader\n.pds-loader--typing {\n --number-typing-timing: 1s;\n\n --opacity-typing-dot-default: 0.4;\n --opacity-typing-dot-active: 1;\n\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-sm);\n box-shadow: var(--pine-box-shadow);\n display: inline-flex;\n gap: var(--pine-dimension-2xs);\n margin-block: var(--pine-dimension-none);\n margin-inline: auto;\n padding-block: 15px;\n padding-inline: 20px;\n position: relative;\n\n span {\n background-color: var(--pine-color-border-hover);\n block-size: 6px;\n border-radius: var(--pine-border-radius-full);\n inline-size: 6px;\n opacity: var(--opacity-typing-dot-default);\n\n @for $i from 1 through 3 {\n &:nth-of-type(#{$i}) {\n animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n }\n }\n }\n}\n\n@keyframes typing {\n 50% {\n opacity: var(--opacity-typing-dot-active);\n transform: scale(1.25);\n }\n}\n\n.pds-loader__label {\n --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/*\n @part loader-svg - Exposes the spinner SVG element for color customization.\n * @slot label - Default slot for Loader label text.\n /\n\n@Component({\n tag: 'pds-loader',\n styleUrls: ['pds-loader.scss'],\n shadow: true,\n})\nexport class PdsLoader {\n /\n If false, the loader will be hidden.\n /\n @Prop() isLoading: boolean = true;\n\n /\n Determines whether the loader should display a label.\n /\n @Prop() showLabel?: boolean = false;\n\n /\n Sets the size of the spinner loader. Value can be preset or custom.\n /\n @Prop({ reflect: true }) size?:\n \| 'xs' // 24px\n \| 'sm' // 32px\n \| 'md' // 48px\n \| 'lg' // 64px\n \| 'xl' // 80px\n \| string = 'md';\n\n /\n Determines the type of loader.\n */\n @Prop() variant: 'spinner' \| 'typing' = 'spinner';\n\n private loaderSize() {\n const sizes: { [key: string]: string } = {\n xs: '24px',\n sm: '32px',\n md: '48px',\n lg: '64px',\n xl: '80px',\n };\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size;\n }\n }\n\n private style = () => {\n if (this.size !== undefined) {\n return {\n height: this.loaderSize(),\n width: this.loaderSize(),\n };\n }\n };\n\n render() {\n return (\n <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n {this.variant === 'spinner' && (\n <div class=\"pds-loader--spinner\">\n <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\" part=\"loader-svg\">\n <defs>\n <linearGradient id=\"spinner-secondHalf\">\n <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n <linearGradient id=\"spinner-firstHalf\">\n <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n </linearGradient>\n </defs>\n\n <g class=\"pds-loader__spinner-path\">\n <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n </g>\n </svg>\n </div>\n )}\n\n {this.variant === 'typing' && (\n <div class=\"pds-loader--typing\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n )}\n\n <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n <slot name=\"label\">Loading...</slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pds-modal-content.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200);-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}";
 const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
          * @default 'none'
@@ -194,14 +196,14 @@ const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '5357ae43a3c7e6922a182a00ddf0241775d5a2a2' }, h("div", { key: '100bf34dbc72b4d7ec7de8dfe64aaa617f840a70', class: {
+        return (h(Host, { key: '11f1dba4ecce4a2dbf5afcd484a545a68559b0dd' }, h("div", { key: '09af48c8b62dbd0f0b418e9b15175fd9f4409636', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '3f4a2281f3e1243a86dfb7ac496e6e190c1df548' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'd738f5346e407ca6a5d92ff81d10387f7edc03bf' }))));
     }
     get el() { return this; }
     static get style() { return pdsModalContentCss; }
-}, [4, "pds-modal-content", {
+}, [260, "pds-modal-content", {
         "border": [513],
         "contentMaxHeight": [32]
     }]);

package/components/pds-modal-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-modal-content.js","mappings":"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","names":["PdsModalContent","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-content/pds-modal-content.scss?tag=pds-modal-content","src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"sourcesContent":["pds-modal-content {\n display: block;\n flex: 1 1 auto;\n width: 100%;\n\n &:has(.pds-modal-content.pds-modal-content--border-none) {\n border: 0;\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-both) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-top) {\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-bottom) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n }\n}\n\n.pds-modal-content {\n display: block;\n flex: 1 1 auto;\n // Max height is set via inline styles based on header and footer heights\n min-height: 0;\n width: 100%;\n\n}\n","import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\ndeclare global {\n interface HTMLPdsModalContentElement extends HTMLElement {\n border: 'none' \| 'both';\n }\n}\n\n@Component({\n tag: 'pds-modal-content',\n styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n @Element() el: HTMLPdsModalContentElement;\n\n /*\n The border style for the content area. When not explicitly set, automatically determined based on scroll state.\n * @default 'none'\n /\n @Prop({ reflect: true }) border: 'none' \| 'both' \| 'top' \| 'bottom' = 'none';\n\n @State() contentMaxHeight: string = 'none';\n\n /\n Tracks whether the border prop was explicitly set by the user\n /\n private userSetBorder = false;\n\n componentWillLoad() {\n // Check if border was explicitly set via attribute or property\n const borderAttr = this.el.getAttribute('border');\n const hasBorderAttribute = borderAttr !== null;\n\n // If border attribute exists or border prop is not the default, user set it\n this.userSetBorder = hasBorderAttribute \|\| this.border !== 'none';\n }\n\n componentDidLoad() {\n this.calculateMaxHeight();\n\n // Set up resize listener\n window.addEventListener('resize', this.handleResize.bind(this));\n\n // Only set up scroll listener for border updates if borders are managed automatically\n if (!this.userSetBorder) {\n setTimeout(() => {\n // The scroll happens on the component element itself (this.el), not the inner div\n console.log('Setting up scroll listener on component element:', this.el);\n this.el.addEventListener('scroll', this.handleScroll.bind(this));\n // Initial border update after everything is set up\n setTimeout(() => this.updateBorders(), 100);\n }, 100);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize.bind(this));\n\n // Clean up scroll listener only if it was set up\n if (!this.userSetBorder) {\n this.el.removeEventListener('scroll', this.handleScroll.bind(this));\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n /\n Handle scroll events\n /\n private handleScroll() {\n console.log('Scroll event fired!');\n this.updateBorders();\n }\n\n /\n Handle resize events\n /\n private handleResize() {\n this.calculateMaxHeight();\n // Update borders after resize as content scrollability might change\n setTimeout(() => this.updateBorders(), 50);\n }\n\n /\n Calculates the max-height based on header and footer heights\n /\n private mutationObserver: MutationObserver;\n\n /\n Updates border visibility based on scroll state (only if not user-defined)\n /\n private updateBorders() {\n // If user explicitly set a border value, don't override it\n if (this.userSetBorder) {\n return;\n }\n\n // Find the modal element (parent of this component)\n const modalElement = this.el.closest('pds-modal');\n if (!modalElement) return;\n\n // Only apply border logic if modal is scrollable\n const isModalScrollable = modalElement.scrollable !== false;\n if (!isModalScrollable) {\n this.border = 'none';\n return;\n }\n\n // The scrollable element is the component itself (this.el), not the inner div\n const scrollableElement = this.el;\n\n // Check if content is actually scrollable\n const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;\n\n if (!isContentScrollable) {\n this.border = 'none';\n return;\n }\n\n // Determine border position based on scroll position\n const { scrollTop, scrollHeight, clientHeight } = scrollableElement;\n const scrollBottom = scrollTop + clientHeight;\n\n // More generous tolerance for scroll detection (3px instead of 1px)\n const tolerance = 3;\n const isAtTop = scrollTop <= tolerance;\n const isAtBottom = scrollBottom >= scrollHeight - tolerance;\n\n // Debug logging (can be removed later)\n console.log('Border Debug:', {\n scrollTop,\n scrollHeight,\n clientHeight,\n scrollBottom,\n isAtTop,\n isAtBottom,\n currentBorder: this.border\n });\n\n if (isAtTop && isAtBottom) {\n // Content fits exactly, no borders needed\n this.border = 'none';\n console.log('Content fits exactly, no borders needed');\n } else if (isAtTop && !isAtBottom) {\n // At top, show bottom border only\n this.border = 'bottom';\n console.log('At top, show bottom border only');\n } else if (!isAtTop && isAtBottom) {\n // At bottom, show top border only\n this.border = 'top';\n console.log('At bottom, show top border only');\n } else {\n // In middle, show both borders\n this.border = 'both';\n console.log('In middle, show both borders');\n }\n }\n\n /\n Calculates the max-height based on header and footer heights\n /\n private calculateMaxHeight() {\n // Find the modal element (parent of this component)\n const modalElement = this.el.closest('pds-modal');\n if (!modalElement) return;\n\n // Check if the parent modal is scrollable\n const isScrollable = modalElement.scrollable !== false;\n\n setTimeout(() => {\n // If modal is not scrollable, don't apply max-height constraints\n if (!isScrollable) {\n this.contentMaxHeight = 'none';\n const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n if (contentElement) {\n contentElement.style.maxHeight = 'none';\n }\n return;\n }\n\n // Find header and footer elements\n const headerElement = modalElement.querySelector('pds-modal-header');\n const footerElement = modalElement.querySelector('pds-modal-footer');\n\n // Get header and footer heights\n const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n // Set the max-height as a calculation\n if (headerHeight > 0 \|\| footerHeight > 0) {\n // Calculate the available height by subtracting:\n // 1. Header and footer heights\n // 2. Modal padding (48px)\n // 3. Additional space for modal positioning (6vh)\n // 4. Extra adjustment for perfect fit (50px)\n const viewportAdjustment = Math.round(window.innerHeight 0.06); // 6vh approximation\n const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n // Set the content max height\n this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n // Apply the style directly to ensure it takes effect\n const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n if (contentElement) {\n contentElement.style.maxHeight = this.contentMaxHeight;\n }\n } else {\n this.contentMaxHeight = 'none'; // Default fallback\n }\n\n // Update borders after height calculations with longer delay\n setTimeout(() => this.updateBorders(), 150);\n }, 100); // Delay to ensure DOM is fully rendered\n\n // Set up mutation observer if not already done\n if (!this.mutationObserver && modalElement) {\n this.mutationObserver = new MutationObserver(() => {\n this.calculateMaxHeight();\n });\n\n // Observe changes to the modal's children\n this.mutationObserver.observe(modalElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n });\n }\n }\n render() {\n // Only apply max-height style if it's not 'none'\n const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};\n\n return (\n <Host>\n <div\n class={{\n 'pds-modal-content': true,\n [`pds-modal-content--border-${this.border}`]: true\n }}\n style={styleObj}\n tabindex=\"-1\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"pds-modal-content.js","mappings":"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","names":["PdsModalContent","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-content/pds-modal-content.scss?tag=pds-modal-content","src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"sourcesContent":["pds-modal-content {\n display: block;\n flex: 1 1 auto;\n width: 100%;\n\n &:has(.pds-modal-content.pds-modal-content--border-none) {\n border: 0;\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-both) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-top) {\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content.pds-modal-content--border-bottom) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n }\n}\n\n.pds-modal-content {\n display: block;\n flex: 1 1 auto;\n // Max height is set via inline styles based on header and footer heights\n min-height: 0;\n width: 100%;\n\n}\n","import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-content',\n styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n @Element() el: HTMLPdsModalContentElement;\n\n /*\n The border style for the content area. When not explicitly set, automatically determined based on scroll state.\n * @default 'none'\n /\n @Prop({ reflect: true }) border: 'none' \| 'both' \| 'top' \| 'bottom' = 'none';\n\n @State() contentMaxHeight: string = 'none';\n\n /\n Tracks whether the border prop was explicitly set by the user\n /\n private userSetBorder = false;\n\n componentWillLoad() {\n // Check if border was explicitly set via attribute or property\n const borderAttr = this.el.getAttribute('border');\n const hasBorderAttribute = borderAttr !== null;\n\n // If border attribute exists or border prop is not the default, user set it\n this.userSetBorder = hasBorderAttribute \|\| this.border !== 'none';\n }\n\n componentDidLoad() {\n this.calculateMaxHeight();\n\n // Set up resize listener\n window.addEventListener('resize', this.handleResize.bind(this));\n\n // Only set up scroll listener for border updates if borders are managed automatically\n if (!this.userSetBorder) {\n setTimeout(() => {\n // The scroll happens on the component element itself (this.el), not the inner div\n console.log('Setting up scroll listener on component element:', this.el);\n this.el.addEventListener('scroll', this.handleScroll.bind(this));\n // Initial border update after everything is set up\n setTimeout(() => this.updateBorders(), 100);\n }, 100);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize.bind(this));\n\n // Clean up scroll listener only if it was set up\n if (!this.userSetBorder) {\n this.el.removeEventListener('scroll', this.handleScroll.bind(this));\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n /\n Handle scroll events\n /\n private handleScroll() {\n console.log('Scroll event fired!');\n this.updateBorders();\n }\n\n /\n Handle resize events\n /\n private handleResize() {\n this.calculateMaxHeight();\n // Update borders after resize as content scrollability might change\n setTimeout(() => this.updateBorders(), 50);\n }\n\n /\n Calculates the max-height based on header and footer heights\n /\n private mutationObserver: MutationObserver;\n\n /\n Updates border visibility based on scroll state (only if not user-defined)\n /\n private updateBorders() {\n // If user explicitly set a border value, don't override it\n if (this.userSetBorder) {\n return;\n }\n\n // Find the modal element (parent of this component)\n const modalElement = this.el.closest('pds-modal');\n if (!modalElement) return;\n\n // Only apply border logic if modal is scrollable\n const isModalScrollable = modalElement.scrollable !== false;\n if (!isModalScrollable) {\n this.border = 'none';\n return;\n }\n\n // The scrollable element is the component itself (this.el), not the inner div\n const scrollableElement = this.el;\n\n // Check if content is actually scrollable\n const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;\n\n if (!isContentScrollable) {\n this.border = 'none';\n return;\n }\n\n // Determine border position based on scroll position\n const { scrollTop, scrollHeight, clientHeight } = scrollableElement;\n const scrollBottom = scrollTop + clientHeight;\n\n // More generous tolerance for scroll detection (3px instead of 1px)\n const tolerance = 3;\n const isAtTop = scrollTop <= tolerance;\n const isAtBottom = scrollBottom >= scrollHeight - tolerance;\n\n // Debug logging (can be removed later)\n console.log('Border Debug:', {\n scrollTop,\n scrollHeight,\n clientHeight,\n scrollBottom,\n isAtTop,\n isAtBottom,\n currentBorder: this.border\n });\n\n if (isAtTop && isAtBottom) {\n // Content fits exactly, no borders needed\n this.border = 'none';\n console.log('Content fits exactly, no borders needed');\n } else if (isAtTop && !isAtBottom) {\n // At top, show bottom border only\n this.border = 'bottom';\n console.log('At top, show bottom border only');\n } else if (!isAtTop && isAtBottom) {\n // At bottom, show top border only\n this.border = 'top';\n console.log('At bottom, show top border only');\n } else {\n // In middle, show both borders\n this.border = 'both';\n console.log('In middle, show both borders');\n }\n }\n\n /\n Calculates the max-height based on header and footer heights\n /\n private calculateMaxHeight() {\n // Find the modal element (parent of this component)\n const modalElement = this.el.closest('pds-modal');\n if (!modalElement) return;\n\n // Check if the parent modal is scrollable\n const isScrollable = modalElement.scrollable !== false;\n\n setTimeout(() => {\n // If modal is not scrollable, don't apply max-height constraints\n if (!isScrollable) {\n this.contentMaxHeight = 'none';\n const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n if (contentElement) {\n contentElement.style.maxHeight = 'none';\n }\n return;\n }\n\n // Find header and footer elements\n const headerElement = modalElement.querySelector('pds-modal-header');\n const footerElement = modalElement.querySelector('pds-modal-footer');\n\n // Get header and footer heights\n const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n // Set the max-height as a calculation\n if (headerHeight > 0 \|\| footerHeight > 0) {\n // Calculate the available height by subtracting:\n // 1. Header and footer heights\n // 2. Modal padding (48px)\n // 3. Additional space for modal positioning (6vh)\n // 4. Extra adjustment for perfect fit (50px)\n const viewportAdjustment = Math.round(window.innerHeight 0.06); // 6vh approximation\n const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n // Set the content max height\n this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n // Apply the style directly to ensure it takes effect\n const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n if (contentElement) {\n contentElement.style.maxHeight = this.contentMaxHeight;\n }\n } else {\n this.contentMaxHeight = 'none'; // Default fallback\n }\n\n // Update borders after height calculations with longer delay\n setTimeout(() => this.updateBorders(), 150);\n }, 100); // Delay to ensure DOM is fully rendered\n\n // Set up mutation observer if not already done\n if (!this.mutationObserver && modalElement) {\n this.mutationObserver = new MutationObserver(() => {\n this.calculateMaxHeight();\n });\n\n // Observe changes to the modal's children\n this.mutationObserver.observe(modalElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n });\n }\n }\n render() {\n // Only apply max-height style if it's not 'none'\n const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};\n\n return (\n <Host>\n <div\n class={{\n 'pds-modal-content': true,\n [`pds-modal-content--border-${this.border}`]: true\n }}\n style={styleObj}\n tabindex=\"-1\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pds-modal-footer.js CHANGED Viewed

@@ -3,15 +3,17 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const pdsModalFooterCss = "pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}";
 const PdsModalFooter$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalFooter extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, h("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
     }
     static get style() { return pdsModalFooterCss; }
-}, [4, "pds-modal-footer"]);
+}, [260, "pds-modal-footer"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/pds-modal-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-modal-footer.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA~~;;;;;~~IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalFooter","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-footer/pds-modal-footer.scss?tag=pds-modal-footer","src/components/pds-modal/pds-modal-footer/pds-modal-footer.tsx"],"sourcesContent":["pds-modal-footer {\n display: block;\n width: 100%;\n}\n\n.pds-modal__footer {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-footer',\n styleUrl: 'pds-modal-footer.scss',\n shadow: false,\n})\nexport class PdsModalFooter {\n render() {\n return (\n <footer class=\"pds-modal__footer\">\n <slot></slot>\n </footer>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-modal-footer.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalFooter","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-footer/pds-modal-footer.scss?tag=pds-modal-footer","src/components/pds-modal/pds-modal-footer/pds-modal-footer.tsx"],"sourcesContent":["pds-modal-footer {\n display: block;\n width: 100%;\n}\n\n.pds-modal__footer {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-footer',\n styleUrl: 'pds-modal-footer.scss',\n shadow: false,\n})\nexport class PdsModalFooter {\n render() {\n return (\n <footer class=\"pds-modal__footer\">\n <slot></slot>\n </footer>\n );\n }\n}\n"],"version":3}

package/components/pds-modal-header.js CHANGED Viewed

@@ -3,15 +3,17 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const pdsModalHeaderCss = "pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}";
 const PdsModalHeader$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalHeader extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, h("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
     }
     static get style() { return pdsModalHeaderCss; }
-}, [4, "pds-modal-header"]);
+}, [260, "pds-modal-header"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/pds-modal-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-modal-header.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA~~;;;;;~~IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalHeader","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-header/pds-modal-header.scss?tag=pds-modal-header","src/components/pds-modal/pds-modal-header/pds-modal-header.tsx"],"sourcesContent":["pds-modal-header {\n display: block;\n width: 100%;\n}\n\n.pds-modal__header {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-header',\n styleUrl: 'pds-modal-header.scss',\n shadow: false,\n})\nexport class PdsModalHeader {\n render() {\n return (\n <header class=\"pds-modal__header\">\n <slot></slot>\n </header>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-modal-header.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalHeader","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-header/pds-modal-header.scss?tag=pds-modal-header","src/components/pds-modal/pds-modal-header/pds-modal-header.tsx"],"sourcesContent":["pds-modal-header {\n display: block;\n width: 100%;\n}\n\n.pds-modal__header {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-header',\n styleUrl: 'pds-modal-header.scss',\n shadow: false,\n})\nexport class PdsModalHeader {\n render() {\n return (\n <header class=\"pds-modal__header\">\n <slot></slot>\n </header>\n );\n }\n}\n"],"version":3}

package/components/pds-modal.js CHANGED Viewed

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
 const PdsModal$1 = /*@__PURE__*/ proxyCustomElement(class PdsModal extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.pdsModalOpen = createEvent(this, "pdsModalOpen", 7);
         this.pdsModalClose = createEvent(this, "pdsModalClose", 7);
         this.focusableElements = [];
@@ -253,7 +255,7 @@ const PdsModal$1 = /*@__PURE__*/ proxyCustomElement(class PdsModal extends HTMLE
         "open": ["handleOpenChange"]
     }; }
     static get style() { return pdsModalCss; }
-}, [4, "pds-modal", {
+}, [260, "pds-modal", {
         "backdropDismiss": [4, "backdrop-dismiss"],
         "componentId": [1, "component-id"],
         "open": [1028],

package/components/pds-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-modal.js","mappings":"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","names":["PdsModal","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal.scss?tag=pds-modal","src/components/pds-modal/pds-modal.tsx"],"sourcesContent":[".pds-modal__backdrop {\n align-items: flex-start;\n background-color: rgba(0, 0, 0, 0.4);\n border: 0;\n display: flex;\n height: 100%;\n inset: 0;\n justify-content: center;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n opacity: 0;\n padding: 0;\n position: fixed;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n visibility: hidden;\n width: 100%;\n z-index: var(--pine-z-index-modal);\n\n @supports (backdrop-filter: blur(3px)) {\n backdrop-filter: blur(3px);\n }\n\n // Increase z-index for nested modals\n pds-modal & {\n z-index: var(--pine-z-index-priority);\n }\n\n &::backdrop {\n background: transparent;\n }\n\n &.open {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.pds-modal {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-dimension-sm);\n box-shadow: var(--pine-box-shadow-400);\n display: flex;\n flex-direction: column;\n margin: var(--pine-dimension-md);\n max-height: none;\n width: 100%;\n\n &.pds-modal--scrollable {\n max-height: calc(100vh - (calc(5vh + 96px)));\n\n @supports (height: 100dvh) {\n max-height: calc(100dvh - (calc(5dvh + 96px)));\n }\n }\n\n @media (min-width: 992px) {\n margin-block-start: 6vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 6dvh;\n }\n }\n\n @media (min-width: 1200px) {\n margin-block-start: 8vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 8dvh;\n }\n }\n}\n\n.pds-modal--sm {\n max-width: 520px;\n}\n\n.pds-modal--md {\n max-width: 700px;\n}\n\n.pds-modal--lg {\n max-width: 900px;\n}\n\n.pds-modal--fullscreen {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100vh;\n max-width: 100%;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n\n &.pds-modal--scrollable {\n max-height: 100vh;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n }\n}\n\n.pds-modal-content {\n .pds-modal--fullscreen & {\n flex: 1;\n }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n pds-modal-content {\n border-block-end: 1px solid transparent;\n border-block-start: 1px solid transparent;\n overflow-y: auto;\n }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n pds-modal-content {\n overflow-y: visible;\n }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal',\n styleUrl: 'pds-modal.scss',\n shadow: false\n})\nexport class PdsModal {\n private modalRef: HTMLDialogElement;\n private previousActiveElement: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n\n @Element() el: HTMLPdsModalElement;\n\n /*\n Whether the modal can be dismissed by clicking the backdrop\n * @default true\n /\n @Prop() backdropDismiss = true;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Whether the modal is open\n * @default false\n /\n @Prop({ mutable: true }) open = false;\n\n /\n The size of the modal\n * @default 'md'\n /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'fullscreen' = 'md';\n\n /\n Whether the modal content should be scrollable\n * @default true\n /\n @Prop() scrollable = true;\n\n /\n Emitted when the modal is opened\n /\n @Event() pdsModalOpen: EventEmitter<void>;\n\n /\n Emitted when the modal is closed\n /\n @Event() pdsModalClose: EventEmitter<void>;\n\n /\n Stores the list of focusable elements in the modal\n /\n @State() focusableElementsArray: HTMLElement[] = [];\n\n componentDidLoad() {\n this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n // Add keyboard event listener\n document.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback() {\n // Clean up event listener\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.showModal();\n } else {\n this.hideModal();\n }\n }\n\n /\n Updates the list of focusable elements in the modal\n /\n private updateFocusableElements() {\n if (!this.modalRef) return;\n\n // Get all focusable elements within the modal\n const selector = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'pds-button:not([disabled])',\n 'pds-link:not([disabled])',\n 'pds-input:not([disabled])',\n 'pds-checkbox:not([disabled])',\n 'pds-radio:not([disabled])',\n 'pds-switch:not([disabled])',\n 'pds-select:not([disabled])',\n ].join(',');\n\n this.focusableElements = Array.from(\n this.modalRef.querySelectorAll(selector)\n ) as HTMLElement[];\n\n // Filter out elements with display: none or visibility: hidden\n this.focusableElements = this.focusableElements.filter(el => {\n const style = window.getComputedStyle(el);\n return style.display !== 'none' && style.visibility !== 'hidden';\n });\n }\n\n /\n Sets focus to the first focusable element in the modal\n /\n private setInitialFocus() {\n if (this.focusableElements.length === 0) return;\n\n // Focus the first focusable element\n const firstElement = this.focusableElements[0];\n\n // For web components, we need to ensure they're properly focused\n this.focusElement(firstElement);\n }\n\n /\n Helper method to focus an element, with special handling for web components\n /\n private focusElement(element: HTMLElement) {\n if (!element) return;\n\n try {\n // Try standard focus first\n element.focus();\n\n // Check if focus worked\n setTimeout(() => {\n if (document.activeElement !== element) {\n // For web components, try to find a focusable element inside\n if (element.shadowRoot) {\n const focusableInShadow = element.shadowRoot.querySelector(\n 'button, [tabindex], input, a[href]'\n ) as HTMLElement;\n\n if (focusableInShadow) {\n focusableInShadow.focus();\n }\n }\n }\n }, 0);\n } catch (error) {\n console.error('Error focusing element:', error);\n }\n }\n\n /\n Opens the modal\n /\n @Method()\n async showModal() {\n if (this.modalRef) {\n try {\n // Store the currently focused element to restore focus when modal closes\n this.previousActiveElement = document.activeElement as HTMLElement;\n\n // Use native dialog showModal method which makes the rest of the page inert\n this.modalRef.showModal();\n this.open = true;\n\n // Update focusable elements and set initial focus\n // Using a longer timeout to ensure all components are fully rendered\n setTimeout(() => {\n this.updateFocusableElements();\n this.setInitialFocus();\n this.pdsModalOpen.emit();\n }, 100);\n } catch (error) {\n console.error('Failed to show modal:', error);\n }\n }\n }\n\n /\n Closes the modal\n /\n @Method()\n async hideModal() {\n if (this.modalRef) {\n try {\n this.modalRef.close();\n this.open = false;\n\n // Restore focus to the element that was focused before the modal was opened\n if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n this.previousActiveElement.focus();\n }\n\n this.pdsModalClose.emit();\n } catch (error) {\n console.error('Failed to hide modal:', error);\n }\n }\n }\n\n private handleBackdropClick = (e: MouseEvent) => {\n if (!this.backdropDismiss \|\| !this.open) return;\n\n if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n e.stopPropagation();\n\n // Only close if this is the innermost modal\n if (this.isInnermostModal()) {\n this.hideModal();\n }\n }\n };\n\n /\n Gets the z-index of a modal's backdrop element\n /\n private getBackdropZIndex(modal: Element): number {\n const backdrop = modal.querySelector('.pds-modal__backdrop');\n return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n }\n\n /\n Checks if this modal is the innermost (highest z-index) modal\n */\n private isInnermostModal(): boolean {\n // Find all open modals\n const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n modal => modal.open\n );\n\n if (openModals.length === 0) return false;\n\n // Get this modal's backdrop element\n const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n if (!thisBackdrop) return false;\n\n // Get computed z-index of all open modal backdrops\n const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n // Get the highest z-index\n const maxZIndex = Math.max(...modalZIndexes);\n\n // Check if this modal's backdrop has the highest z-index\n const thisZIndex = this.getBackdropZIndex(this.el);\n return thisZIndex === maxZIndex;\n }\n\n private handleKeyDown = (e: KeyboardEvent) => {\n // If the modal is not open, don't handle any keyboard events\n if (!this.open) return;\n\n // Handle Escape key to close the modal\n if (e.key === 'Escape') {\n // Only close if this is the innermost modal\n if (this.isInnermostModal()) {\n e.preventDefault();\n this.hideModal();\n }\n return;\n }\n\n // Handle Tab key for focus trapping\n if (e.key === 'Tab') {\n // If there are no focusable elements, do nothing\n if (this.focusableElements.length === 0) return;\n\n // Get the first and last focusable elements\n const firstFocusableElement = this.focusableElements[0];\n const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n // Get the current active element\n const activeElement = document.activeElement;\n\n // Check if we need to wrap focus\n const isFirstElement = activeElement === firstFocusableElement \|\|\n firstFocusableElement.contains(activeElement as Node);\n\n const isLastElement = activeElement === lastFocusableElement \|\|\n lastFocusableElement.contains(activeElement as Node);\n\n // If shift + tab is pressed and focus is on the first element, move to the last element\n if (e.shiftKey && isFirstElement) {\n e.preventDefault();\n this.focusElement(lastFocusableElement);\n }\n // If tab is pressed and focus is on the last element, move to the first element\n else if (!e.shiftKey && isLastElement) {\n e.preventDefault();\n this.focusElement(firstFocusableElement);\n }\n }\n };\n\n render() {\n return (\n <dialog\n class={{\n 'pds-modal__backdrop': true,\n 'open': this.open\n }}\n aria-modal=\"true\"\n aria-labelledby={`${this.componentId}-heading`}\n onClick={this.handleBackdropClick}\n >\n <div\n class={{\n 'pds-modal': true,\n [`pds-modal--${this.size}`]: true,\n 'pds-modal--scrollable': this.scrollable\n }}\n >\n <slot></slot>\n </div>\n </dialog>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-modal.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u+EAAu+E;;MCO9+EA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAkB,EAAE;AAI7C;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,IAAI;AAO9B;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAErC;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAsC,IAAI;AAEtD;;;AAGG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,IAAI;AAYzB;;AAEG;AACM,QAAA,IAAsB,CAAA,sBAAA,GAAkB,EAAE;AAoJ3C,QAAA,IAAA,CAAA,mBAAmB,GAAG,CAAC,CAAa,KAAI;YAC9C,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE;YAEzC,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;gBACvE,CAAC,CAAC,eAAe,EAAE;;AAGnB,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;oBAC3B,IAAI,CAAC,SAAS,EAAE;;;AAGtB,SAAC;AAoCO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,CAAgB,KAAI;;YAE3C,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE;;AAGhB,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;;AAEtB,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;oBAC3B,CAAC,CAAC,cAAc,EAAE;oBAClB,IAAI,CAAC,SAAS,EAAE;;gBAElB;;;AAIF,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;;AAEnB,gBAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;oBAAE;;gBAGzC,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACvD,gBAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;AAGtF,gBAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa;;AAG5C,gBAAA,MAAM,cAAc,GAAG,aAAa,KAAK,qBAAqB;AACxC,oBAAA,qBAAqB,CAAC,QAAQ,CAAC,aAAqB,CAAC;AAE3E,gBAAA,MAAM,aAAa,GAAG,aAAa,KAAK,oBAAoB;AACvC,oBAAA,oBAAoB,CAAC,QAAQ,CAAC,aAAqB,CAAC;;AAGzE,gBAAA,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,EAAE;oBAChC,CAAC,CAAC,cAAc,EAAE;AAClB,oBAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC;;;AAGpC,qBAAA,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,aAAa,EAAE;oBACrC,CAAC,CAAC,cAAc,EAAE;AAClB,oBAAA,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC;;;AAG9C,SAAC;AAyBF;IAtQC,gBAAgB,GAAA;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAsB;;QAElF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;;IAG1D,oBAAoB,GAAA;;QAElB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;;AAI7D,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,SAAS,EAAE;;aACX;YACL,IAAI,CAAC,SAAS,EAAE;;;AAIpB;;AAEG;IACK,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;AAGpB,QAAA,MAAM,QAAQ,GAAG;YACf,SAAS;YACT,wBAAwB;YACxB,uBAAuB;YACvB,wBAAwB;YACxB,0BAA0B;YAC1B,iCAAiC;YACjC,4BAA4B;YAC5B,0BAA0B;YAC1B,2BAA2B;YAC3B,8BAA8B;YAC9B,2BAA2B;YAC3B,4BAA4B;YAC5B,4BAA4B;AAC7B,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC;AAEX,QAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACjC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CACxB;;QAGlB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,IAAG;YAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ;AAClE,SAAC,CAAC;;AAGJ;;AAEG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE;;QAGzC,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;;AAG9C,QAAA,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;;AAGjC;;AAEG;AACK,IAAA,YAAY,CAAC,OAAoB,EAAA;AACvC,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,IAAI;;YAEF,OAAO,CAAC,KAAK,EAAE;;YAGf,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,EAAE;;AAEtC,oBAAA,IAAI,OAAO,CAAC,UAAU,EAAE;wBACtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CACxD,oCAAoC,CACtB;wBAEhB,IAAI,iBAAiB,EAAE;4BACrB,iBAAiB,CAAC,KAAK,EAAE;;;;aAIhC,EAAE,CAAC,CAAC;;QACL,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC;;;AAInD;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI;;AAEF,gBAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAA4B;;AAGlE,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE;AACzB,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;;gBAIhB,UAAU,CAAC,MAAK;oBACd,IAAI,CAAC,uBAAuB,EAAE;oBAC9B,IAAI,CAAC,eAAe,EAAE;AACtB,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;iBACzB,EAAE,GAAG,CAAC;;YACP,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC;;;;AAKnD;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI;AACF,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;AACrB,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAGjB,gBAAA,IAAI,IAAI,CAAC,qBAAqB,IAAI,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,KAAK,UAAU,EAAE;AACxF,oBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE;;AAGpC,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;YACzB,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC;;;;AAkBnD;;AAEG;AACK,IAAA,iBAAiB,CAAC,KAAc,EAAA;QACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC;QAC5D,OAAO,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,GAAG,EAAE;;AAGxE;;AAEG;IACK,gBAAgB,GAAA;;QAEtB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAC1E,KAAK,IAAI,KAAK,CAAC,IAAI,CACpB;AAED,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,KAAK;;QAGzC,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC;AAClE,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;;AAG/B,QAAA,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;;QAG5E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;;QAG5C,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC;QAClD,OAAO,UAAU,KAAK,SAAS;;IAiDjC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,IAAI;gBAC3B,MAAM,EAAE,IAAI,CAAC;AACd,aAAA,EAAA,YAAA,EACU,MAAM,EAAA,iBAAA,EACA,CAAG,EAAA,IAAI,CAAC,WAAW,CAAU,QAAA,CAAA,EAC9C,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;gBACjC,uBAAuB,EAAE,IAAI,CAAC;AAC/B,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModal","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal.scss?tag=pds-modal","src/components/pds-modal/pds-modal.tsx"],"sourcesContent":[".pds-modal__backdrop {\n align-items: flex-start;\n background-color: rgba(0, 0, 0, 0.4);\n border: 0;\n display: flex;\n height: 100%;\n inset: 0;\n justify-content: center;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n opacity: 0;\n padding: 0;\n position: fixed;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n visibility: hidden;\n width: 100%;\n z-index: var(--pine-z-index-modal);\n\n @supports (backdrop-filter: blur(3px)) {\n backdrop-filter: blur(3px);\n }\n\n // Increase z-index for nested modals\n pds-modal & {\n z-index: var(--pine-z-index-priority);\n }\n\n &::backdrop {\n background: transparent;\n }\n\n &.open {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.pds-modal {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-dimension-sm);\n box-shadow: var(--pine-box-shadow-400);\n display: flex;\n flex-direction: column;\n margin: var(--pine-dimension-md);\n max-height: none;\n width: 100%;\n\n &.pds-modal--scrollable {\n max-height: calc(100vh - (calc(5vh + 96px)));\n\n @supports (height: 100dvh) {\n max-height: calc(100dvh - (calc(5dvh + 96px)));\n }\n }\n\n @media (min-width: 992px) {\n margin-block-start: 6vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 6dvh;\n }\n }\n\n @media (min-width: 1200px) {\n margin-block-start: 8vh;\n\n @supports (height: 100dvh) {\n margin-block-start: 8dvh;\n }\n }\n}\n\n.pds-modal--sm {\n max-width: 520px;\n}\n\n.pds-modal--md {\n max-width: 700px;\n}\n\n.pds-modal--lg {\n max-width: 900px;\n}\n\n.pds-modal--fullscreen {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100vh;\n max-width: 100%;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n\n &.pds-modal--scrollable {\n max-height: 100vh;\n\n @supports (height: 100dvh) {\n max-height: 100dvh;\n }\n }\n}\n\n.pds-modal-content {\n .pds-modal--fullscreen & {\n flex: 1;\n }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n pds-modal-content {\n border-block-end: 1px solid transparent;\n border-block-start: 1px solid transparent;\n overflow-y: auto;\n }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n pds-modal-content {\n overflow-y: visible;\n }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal',\n styleUrl: 'pds-modal.scss',\n shadow: false\n})\nexport class PdsModal {\n private modalRef: HTMLDialogElement;\n private previousActiveElement: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n\n @Element() el: HTMLPdsModalElement;\n\n /*\n Whether the modal can be dismissed by clicking the backdrop\n * @default true\n /\n @Prop() backdropDismiss = true;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Whether the modal is open\n * @default false\n /\n @Prop({ mutable: true }) open = false;\n\n /\n The size of the modal\n * @default 'md'\n /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'fullscreen' = 'md';\n\n /\n Whether the modal content should be scrollable\n * @default true\n /\n @Prop() scrollable = true;\n\n /\n Emitted when the modal is opened\n /\n @Event() pdsModalOpen: EventEmitter<void>;\n\n /\n Emitted when the modal is closed\n /\n @Event() pdsModalClose: EventEmitter<void>;\n\n /\n Stores the list of focusable elements in the modal\n /\n @State() focusableElementsArray: HTMLElement[] = [];\n\n componentDidLoad() {\n this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n // Add keyboard event listener\n document.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback() {\n // Clean up event listener\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.showModal();\n } else {\n this.hideModal();\n }\n }\n\n /\n Updates the list of focusable elements in the modal\n /\n private updateFocusableElements() {\n if (!this.modalRef) return;\n\n // Get all focusable elements within the modal\n const selector = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'pds-button:not([disabled])',\n 'pds-link:not([disabled])',\n 'pds-input:not([disabled])',\n 'pds-checkbox:not([disabled])',\n 'pds-radio:not([disabled])',\n 'pds-switch:not([disabled])',\n 'pds-select:not([disabled])',\n ].join(',');\n\n this.focusableElements = Array.from(\n this.modalRef.querySelectorAll(selector)\n ) as HTMLElement[];\n\n // Filter out elements with display: none or visibility: hidden\n this.focusableElements = this.focusableElements.filter(el => {\n const style = window.getComputedStyle(el);\n return style.display !== 'none' && style.visibility !== 'hidden';\n });\n }\n\n /\n Sets focus to the first focusable element in the modal\n /\n private setInitialFocus() {\n if (this.focusableElements.length === 0) return;\n\n // Focus the first focusable element\n const firstElement = this.focusableElements[0];\n\n // For web components, we need to ensure they're properly focused\n this.focusElement(firstElement);\n }\n\n /\n Helper method to focus an element, with special handling for web components\n /\n private focusElement(element: HTMLElement) {\n if (!element) return;\n\n try {\n // Try standard focus first\n element.focus();\n\n // Check if focus worked\n setTimeout(() => {\n if (document.activeElement !== element) {\n // For web components, try to find a focusable element inside\n if (element.shadowRoot) {\n const focusableInShadow = element.shadowRoot.querySelector(\n 'button, [tabindex], input, a[href]'\n ) as HTMLElement;\n\n if (focusableInShadow) {\n focusableInShadow.focus();\n }\n }\n }\n }, 0);\n } catch (error) {\n console.error('Error focusing element:', error);\n }\n }\n\n /\n Opens the modal\n /\n @Method()\n async showModal() {\n if (this.modalRef) {\n try {\n // Store the currently focused element to restore focus when modal closes\n this.previousActiveElement = document.activeElement as HTMLElement;\n\n // Use native dialog showModal method which makes the rest of the page inert\n this.modalRef.showModal();\n this.open = true;\n\n // Update focusable elements and set initial focus\n // Using a longer timeout to ensure all components are fully rendered\n setTimeout(() => {\n this.updateFocusableElements();\n this.setInitialFocus();\n this.pdsModalOpen.emit();\n }, 100);\n } catch (error) {\n console.error('Failed to show modal:', error);\n }\n }\n }\n\n /\n Closes the modal\n /\n @Method()\n async hideModal() {\n if (this.modalRef) {\n try {\n this.modalRef.close();\n this.open = false;\n\n // Restore focus to the element that was focused before the modal was opened\n if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n this.previousActiveElement.focus();\n }\n\n this.pdsModalClose.emit();\n } catch (error) {\n console.error('Failed to hide modal:', error);\n }\n }\n }\n\n private handleBackdropClick = (e: MouseEvent) => {\n if (!this.backdropDismiss \|\| !this.open) return;\n\n if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n e.stopPropagation();\n\n // Only close if this is the innermost modal\n if (this.isInnermostModal()) {\n this.hideModal();\n }\n }\n };\n\n /\n Gets the z-index of a modal's backdrop element\n /\n private getBackdropZIndex(modal: Element): number {\n const backdrop = modal.querySelector('.pds-modal__backdrop');\n return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n }\n\n /\n Checks if this modal is the innermost (highest z-index) modal\n */\n private isInnermostModal(): boolean {\n // Find all open modals\n const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n modal => modal.open\n );\n\n if (openModals.length === 0) return false;\n\n // Get this modal's backdrop element\n const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n if (!thisBackdrop) return false;\n\n // Get computed z-index of all open modal backdrops\n const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n // Get the highest z-index\n const maxZIndex = Math.max(...modalZIndexes);\n\n // Check if this modal's backdrop has the highest z-index\n const thisZIndex = this.getBackdropZIndex(this.el);\n return thisZIndex === maxZIndex;\n }\n\n private handleKeyDown = (e: KeyboardEvent) => {\n // If the modal is not open, don't handle any keyboard events\n if (!this.open) return;\n\n // Handle Escape key to close the modal\n if (e.key === 'Escape') {\n // Only close if this is the innermost modal\n if (this.isInnermostModal()) {\n e.preventDefault();\n this.hideModal();\n }\n return;\n }\n\n // Handle Tab key for focus trapping\n if (e.key === 'Tab') {\n // If there are no focusable elements, do nothing\n if (this.focusableElements.length === 0) return;\n\n // Get the first and last focusable elements\n const firstFocusableElement = this.focusableElements[0];\n const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n // Get the current active element\n const activeElement = document.activeElement;\n\n // Check if we need to wrap focus\n const isFirstElement = activeElement === firstFocusableElement \|\|\n firstFocusableElement.contains(activeElement as Node);\n\n const isLastElement = activeElement === lastFocusableElement \|\|\n lastFocusableElement.contains(activeElement as Node);\n\n // If shift + tab is pressed and focus is on the first element, move to the last element\n if (e.shiftKey && isFirstElement) {\n e.preventDefault();\n this.focusElement(lastFocusableElement);\n }\n // If tab is pressed and focus is on the last element, move to the first element\n else if (!e.shiftKey && isLastElement) {\n e.preventDefault();\n this.focusElement(firstFocusableElement);\n }\n }\n };\n\n render() {\n return (\n <dialog\n class={{\n 'pds-modal__backdrop': true,\n 'open': this.open\n }}\n aria-modal=\"true\"\n aria-labelledby={`${this.componentId}-heading`}\n onClick={this.handleBackdropClick}\n >\n <div\n class={{\n 'pds-modal': true,\n [`pds-modal--${this.size}`]: true,\n 'pds-modal--scrollable': this.scrollable\n }}\n >\n <slot></slot>\n </div>\n </dialog>\n );\n }\n}\n"],"version":3}