@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/cjs/pds-link.cjs.entry.js

@@ -1,21 +1,39 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var utils = require('./utils-BhRmyxT8.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const index$1 = require('./index-de3f0730.js');
-
-const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-charcoal-400);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-087);--font-size-xs:var(--pine-font-size-075);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-50);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
-const PdsLinkStyle0 = pdsLinkCss;
+const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);isolation:isolate;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
 
+// Used when `externalLabel` is unset; an empty string makes the icon decorative instead.
+const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
 const PdsLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.componentId = undefined;
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
+         * @defaultValue false
+         */
         this.external = false;
+        /**
+         * Sets the link variant styles.
+         * @defaultValue inline
+         */
         this.variant = 'inline';
+        /**
+         * The font size of the link's text.
+         * @defaultValue lg
+         */
         this.fontSize = 'lg';
-        this.href = undefined;
     }
     classNames() {
         const classNames = ['pds-link'];
@@ -27,13 +45,32 @@ const PdsLink = class {
         }
         return classNames.join(' ');
     }
+    setLinkStyles() {
+        if (!this.color)
+            return;
+        const linkColors = {
+            secondary: 'var(--pine-color-text-primary)',
+            accent: 'var(--pine-color-accent)',
+            danger: 'var(--pine-color-danger)',
+        };
+        const linkStyles = utils.setColor(this.color, linkColors);
+        return linkStyles;
+    }
     render() {
-        return (index.h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, index.h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
-            index.h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: index$1.launch, size: this.fontSize })));
+        var _a;
+        const targetValue = this.target || (this.external ? '_blank' : undefined);
+        const showExternalIcon = this.external;
+        const opensInNewTab = targetValue === '_blank';
+        const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
+        // A `target` other than _blank overrides `external`, and then the label
+        // would be false, so the icon is decorative there, as it is when the
+        // label is empty.
+        const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
+        const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
+        return (index.h("a", { key: '43d5871702d13430c5759b28887c146263e4ee0d', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, index.h("slot", { key: '15552982e8f9ca7e8844f65e98f99df3101db8a5' }, this.href), showExternalIcon &&
+            index.h("pds-icon", { key: 'a4356792c73269a02397b543e1cc8b532ba3e690', icon: index$1.launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
     }
 };
-PdsLink.style = PdsLinkStyle0;
+PdsLink.style = pdsLinkCss();
 
 exports.pds_link = PdsLink;
-
-//# sourceMappingURL=pds-link.cjs.entry.js.map

package/dist/cjs/pds-loader.cjs.entry.js

@@ -1,16 +1,34 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsLoaderCss = ":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-spacing-100)}: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{--color-background-spinner:var(--pine-color-blue-300);--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;block-size:var(--sizing-spinner);color:var(--color-background-spinner);inline-size:var(--sizing-spinner)}.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{--border-radius-typing:var(--pine-border-radius-200);--border-radius-typing-dot:var(--pine-border-radius-round);--box-shadow-typing:var(--pine-box-shadow-sm);--color-background-typing-default:var(--pine-color-grey-200);--color-background-typing-dot-default:var(--pine-color-grey-500);--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;--sizing-typing-dot:calc(var(--pine-spacing-150) / 2);--spacing-typing-gap:var(--pine-spacing-050);--spacing-typing-margin-block:var(--pine-spacing-0);--spacing-typing-margin-inline:auto;--spacing-typing-padding-block:15px;--spacing-typing-padding-inline:var(--pine-spacing-250);-ms-flex-align:center;align-items:center;background-color:var(--color-background-typing-default);border-radius:var(--border-radius-typing);-webkit-box-shadow:var(--box-shadow-typing);box-shadow:var(--box-shadow-typing);display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-typing-gap);margin-block:var(--spacing-typing-margin-block);margin-inline:var(--spacing-typing-margin-inline);padding-block:var(--spacing-typing-padding-block);padding-inline:var(--spacing-typing-padding-inline);position:relative}.pds-loader--typing span{background-color:var(--color-background-typing-dot-default);block-size:var(--sizing-typing-dot);border-radius:var(--border-radius-typing-dot);inline-size:var(--sizing-typing-dot);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.2);transform:scale(1.2)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);font:var(--typography-label-default)}";
-const PdsLoaderStyle0 = pdsLoaderCss;
+const pdsLoaderCss = () => `:host{--loader-color:var(--pine-color-primary);-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-muted);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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.style = () => {
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        /**
+         * If false, the loader will be hidden.
+         */
+        this.isLoading = true;
+        /**
+         * Determines whether the loader should display a label.
+         */
+        this.showLabel = false;
+        /**
+         * Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),
+         * or a custom CSS length such as `128px`. The `typing` variant ignores it.
+         */
+        this.size = 'md';
+        /**
+         * Determines the type of loader.
+         */
+        this.variant = 'spinner';
+        this.getSvgStyle = () => {
             if (this.size !== undefined) {
                 return {
                     height: this.loaderSize(),
@@ -18,10 +36,15 @@ const PdsLoader = class {
                 };
             }
         };
-        this.isLoading = true;
-        this.showLabel = false;
-        this.size = 'md';
-        this.variant = 'spinner';
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    restoreSizeDefault(newValue) {
+        this.size = reflectedAttributeDefault.restoreReflectedDefault(this.el, 'size', newValue, 'md');
     }
     loaderSize() {
         const sizes = {
@@ -39,11 +62,23 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '325b4512d1455cb90d4897e91453c4ec2370ddcb', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, index.h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, index.h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, index.h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, index.h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, index.h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, index.h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, index.h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), index.h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), index.h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), index.h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '423a30358e6f662a0b80cef445c4a20db3dd36f9', name: "label" }, "Loading..."))));
+        const hostClass = `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`;
+        // Explicit 'true': a boolean `true` lands as an empty value, which ARIA reads as unset.
+        const hostAttributes = {
+            'aria-hidden': this.isLoading ? null : 'true',
+            'aria-busy': this.isLoading ? 'true' : null,
+            'aria-live': 'polite',
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (index.h(index.Host, Object.assign({ key: '25f67dfddaf7b5e5947e1b9e97a3a3341fc4a9ca', class: hostClass }, hostAttributes), this.variant === 'spinner' && (index.h("div", { key: 'bea9dd77e189750aac17522ae227ada7b14f15e2', class: "pds-loader--spinner" }, index.h("svg", { key: 'ab4fc80a77459c8f24e3327ed7f15070f34dd4a4', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: '997df5cefd2dd832f5ea9251b5fc80c2ce84a9c5' }, index.h("linearGradient", { key: '92084cf660d2fabd0e7375cbfaf2f5d87f2aa628', id: "spinner-secondHalf" }, index.h("stop", { key: 'ad8d852e05684a7611d833e0305ed4bbd5ca35d0', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '5664d937062006658a4aafe9b7e35131c9d34b75', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: 'f7dfa63b3ffa1904596bb0ac8f41d45d6614c660', id: "spinner-firstHalf" }, index.h("stop", { key: 'ec7a496b42d4782c0e48126408b403ca3bfddd21', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '87b44ef8885072cb41629e0c58419be7aa832ebd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'f6ead61041e2f6d06886f0d93b89da36c498ee2d', class: "pds-loader__spinner-path" }, index.h("path", { key: '8c0dd0255f75c7cba65cfe752e4626e9381de461', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'adb47eb99461bd721da58706930496d8a33101fa', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '67ec5d33f29a617c074479fd976c7f4cfc0c8530', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: 'be149ae7df72a5aeda1c4f064e35c1ec201426f8', class: "pds-loader--typing" }, index.h("span", { key: '6f35aa1230b6ef6c4dada525a0406fcb484068c3' }), index.h("span", { key: 'fa523ebab73e1f4d225c4252514b1aed57503441' }), index.h("span", { key: 'bd1df232b4ea00971581956cc6208c816ae91430' }))), index.h("div", { key: 'aee3c4b21ed5b4efd7c47056af042c0c1d296ed9', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '0655b2f83082a960c859b978f858bc1238f30ac6', name: "label" }, "Loading..."))));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "size": [{
+                "restoreSizeDefault": 0
+            }]
+    }; }
 };
-PdsLoader.style = PdsLoaderStyle0;
+PdsLoader.style = pdsLoaderCss();
 
 exports.pds_loader = PdsLoader;
-
-//# sourceMappingURL=pds-loader.cjs.entry.js.map

package/dist/cjs/pds-modal-content.cjs.entry.js

@@ -0,0 +1,199 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+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-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}`;
+
+const PdsModalContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
+         * @default 'none'
+         */
+        this.border = 'none';
+        this.contentMaxHeight = 'none';
+        /**
+         * Tracks whether the border prop was explicitly set by the user
+         */
+        this.userSetBorder = false;
+        this.hasLoaded = false;
+        /**
+         * Handle scroll events
+         */
+        this.handleScroll = () => {
+            this.updateBorders();
+        };
+        /**
+         * Handle resize events
+         */
+        this.handleResize = () => {
+            this.calculateMaxHeight();
+            // Update borders after resize as content scrollability might change
+            setTimeout(() => this.updateBorders(), 50);
+        };
+    }
+    // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal-content'), '.pds-modal-content');
+    }
+    componentWillLoad() {
+        // Check if border was explicitly set via attribute or property
+        const borderAttr = this.el.getAttribute('border');
+        const hasBorderAttribute = borderAttr !== null;
+        // If border attribute exists or border prop is not the default, user set it
+        this.userSetBorder = hasBorderAttribute || this.border !== 'none';
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.calculateMaxHeight();
+        if (!this.userSetBorder) {
+            // Initial border update after everything is set up
+            setTimeout(() => this.updateBorders(), 200);
+        }
+    }
+    // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
+    // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
+    connectedCallback() {
+        window.addEventListener('resize', this.handleResize);
+        // The scroll happens on the component element itself (this.el), not the inner div
+        this.el.addEventListener('scroll', this.handleScroll);
+        if (this.hasLoaded)
+            this.calculateMaxHeight();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+        this.el.removeEventListener('scroll', this.handleScroll);
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+    /**
+     * Updates border visibility based on scroll state (only if not user-defined)
+     */
+    updateBorders() {
+        // If user explicitly set a border value, don't override it
+        if (this.userSetBorder) {
+            return;
+        }
+        // Find the modal element (parent of this component)
+        const modalElement = this.el.closest('pds-modal');
+        if (!modalElement)
+            return;
+        // Only apply border logic if modal is scrollable
+        const isModalScrollable = modalElement.scrollable !== false;
+        if (!isModalScrollable) {
+            this.border = 'none';
+            return;
+        }
+        // The scrollable element is the component itself (this.el), not the inner div
+        const scrollableElement = this.el;
+        // Check if content is actually scrollable
+        const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;
+        if (!isContentScrollable) {
+            this.border = 'none';
+            return;
+        }
+        // Determine border position based on scroll position
+        const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+        const scrollBottom = scrollTop + clientHeight;
+        // More generous tolerance for scroll detection (3px instead of 1px)
+        const tolerance = 3;
+        const isAtTop = scrollTop <= tolerance;
+        const isAtBottom = scrollBottom >= scrollHeight - tolerance;
+        if (isAtTop && isAtBottom) {
+            // Content fits exactly, no borders needed
+            this.border = 'none';
+        }
+        else if (isAtTop && !isAtBottom) {
+            // At top, show bottom border only
+            this.border = 'bottom';
+        }
+        else if (!isAtTop && isAtBottom) {
+            // At bottom, show top border only
+            this.border = 'top';
+        }
+        else {
+            // In middle, show both borders
+            this.border = 'both';
+        }
+    }
+    /**
+     * Calculates the max-height based on header and footer heights
+     */
+    calculateMaxHeight() {
+        // Find the modal element (parent of this component)
+        const modalElement = this.el.closest('pds-modal');
+        if (!modalElement)
+            return;
+        // Check if the parent modal is scrollable
+        const isScrollable = modalElement.scrollable !== false;
+        setTimeout(() => {
+            // If modal is not scrollable, don't apply max-height constraints
+            if (!isScrollable) {
+                this.contentMaxHeight = 'none';
+                const contentElement = this.el.querySelector('.pds-modal-content');
+                if (contentElement) {
+                    contentElement.style.maxHeight = 'none';
+                }
+                return;
+            }
+            // Find header and footer elements
+            const headerElement = modalElement.querySelector('pds-modal-header');
+            const footerElement = modalElement.querySelector('pds-modal-footer');
+            // Get header and footer heights
+            const headerHeight = headerElement ? headerElement.offsetHeight : 0;
+            const footerHeight = footerElement ? footerElement.offsetHeight : 0;
+            // Set the max-height as a calculation
+            if (headerHeight > 0 || footerHeight > 0) {
+                // Calculate the available height by subtracting:
+                // 1. Header and footer heights
+                // 2. Modal padding (48px)
+                // 3. Additional space for modal positioning (6vh)
+                // 4. Extra adjustment for perfect fit (50px)
+                const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation
+                const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;
+                // Set the content max height
+                this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;
+                // Apply the style directly to ensure it takes effect
+                const contentElement = this.el.querySelector('.pds-modal-content');
+                if (contentElement) {
+                    contentElement.style.maxHeight = this.contentMaxHeight;
+                }
+            }
+            else {
+                this.contentMaxHeight = 'none'; // Default fallback
+            }
+            // Update borders after height calculations with longer delay
+            setTimeout(() => this.updateBorders(), 150);
+        }, 100); // Delay to ensure DOM is fully rendered
+        // Set up mutation observer if not already done
+        if (!this.mutationObserver && modalElement) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.calculateMaxHeight();
+            });
+            // Observe changes to the modal's children
+            this.mutationObserver.observe(modalElement, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class']
+            });
+        }
+    }
+    render() {
+        // Only apply max-height style if it's not 'none'
+        const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
+        return (index.h(index.Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, index.h("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
+                'pds-modal-content': true,
+                [`pds-modal-content--border-${this.border}`]: true
+            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsModalContent.style = pdsModalContentCss();
+
+exports.pds_modal_content = PdsModalContent;

package/dist/cjs/pds-modal-footer.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+const pdsModalFooterCss = () => `pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}`;
+
+const PdsModalFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-modal__footer left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
+    }
+    render() {
+        return (index.h("footer", { key: '3ea8f3a2b955f75682f7ab212f4fc7b05a13cbba', class: "pds-modal__footer" }, index.h("slot", { key: 'e9e53c0d225e48ec1f271646907194421ab2bc68' })));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsModalFooter.style = pdsModalFooterCss();
+
+exports.pds_modal_footer = PdsModalFooter;

package/dist/cjs/pds-modal-header.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+const pdsModalHeaderCss = () => `pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}`;
+
+const PdsModalHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-modal__header left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
+    }
+    render() {
+        return (index.h("header", { key: '9778bdebb88711827eeb0268298e269b920999bd', class: "pds-modal__header" }, index.h("slot", { key: 'e806f49f030839540317cf524ec6058388606cc9' })));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsModalHeader.style = pdsModalHeaderCss();
+
+exports.pds_modal_header = PdsModalHeader;