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

package/dist/collection/components/pds-loader/pds-loader.js

@@ -1,10 +1,31 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 /**
- * @slot label - Default slot for Loader label text.
+ * @part loader-svg - Exposes the spinner SVG element for color customization.
+ * @slot label - Label text. Defaults to "Loading...". Text outside this slot isn't shown or read.
  */
 export class PdsLoader {
     constructor() {
-        this.style = () => {
+        this.hostKeeper = new 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(),
@@ -12,10 +33,15 @@ export class PdsLoader {
                 };
             }
         };
-        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 = restoreReflectedDefault(this.el, 'size', newValue, 'md');
     }
     loaderSize() {
         const sizes = {
@@ -33,7 +59,15 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(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' && (h("div", { key: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, 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 (h(Host, Object.assign({ key: '25f67dfddaf7b5e5947e1b9e97a3a3341fc4a9ca', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'bea9dd77e189750aac17522ae227ada7b14f15e2', class: "pds-loader--spinner" }, h("svg", { key: 'ab4fc80a77459c8f24e3327ed7f15070f34dd4a4', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '997df5cefd2dd832f5ea9251b5fc80c2ce84a9c5' }, h("linearGradient", { key: '92084cf660d2fabd0e7375cbfaf2f5d87f2aa628', id: "spinner-secondHalf" }, h("stop", { key: 'ad8d852e05684a7611d833e0305ed4bbd5ca35d0', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '5664d937062006658a4aafe9b7e35131c9d34b75', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'f7dfa63b3ffa1904596bb0ac8f41d45d6614c660', id: "spinner-firstHalf" }, h("stop", { key: 'ec7a496b42d4782c0e48126408b403ca3bfddd21', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '87b44ef8885072cb41629e0c58419be7aa832ebd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f6ead61041e2f6d06886f0d93b89da36c498ee2d', class: "pds-loader__spinner-path" }, h("path", { key: '8c0dd0255f75c7cba65cfe752e4626e9381de461', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'adb47eb99461bd721da58706930496d8a33101fa', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '67ec5d33f29a617c074479fd976c7f4cfc0c8530', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'be149ae7df72a5aeda1c4f064e35c1ec201426f8', class: "pds-loader--typing" }, h("span", { key: '6f35aa1230b6ef6c4dada525a0406fcb484068c3' }), h("span", { key: 'fa523ebab73e1f4d225c4252514b1aed57503441' }), h("span", { key: 'bd1df232b4ea00971581956cc6208c816ae91430' }))), h("div", { key: 'aee3c4b21ed5b4efd7c47056af042c0c1d296ed9', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '0655b2f83082a960c859b978f858bc1238f30ac6', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -63,8 +97,10 @@ export class PdsLoader {
                     "tags": [],
                     "text": "If false, the loader will be hidden."
                 },
-                "attribute": "is-loading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "is-loading",
                 "defaultValue": "true"
             },
             "showLabel": {
@@ -81,13 +117,15 @@ export class PdsLoader {
                     "tags": [],
                     "text": "Determines whether the loader should display a label."
                 },
-                "attribute": "show-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-label",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "| 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string",
                     "resolved": "string",
@@ -97,10 +135,12 @@ export class PdsLoader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the size of the spinner loader. Value can be preset or custom."
+                    "text": "Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),\nor a custom CSS length such as `128px`. The `typing` variant ignores it."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "variant": {
@@ -117,11 +157,19 @@ export class PdsLoader {
                     "tags": [],
                     "text": "Determines the type of loader."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'spinner'"
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "restoreSizeDefault"
+            }];
+    }
 }
-//# sourceMappingURL=pds-loader.js.map

package/dist/collection/components/pds-loader/stories/pds-loader.stories.js

@@ -1,8 +1,6 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
-  argTypes: extractArgTypes('pds-loader'),
   component: 'pds-loader',
   title: 'components/Loader',
   args: {
@@ -13,8 +11,8 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-loader
-    is-loading="${args.isLoading}"
-    show-label="${args.showLabel}"
+    ?is-loading=${args.isLoading}
+    ?show-label=${args.showLabel}
     size="${args.size}"
     variant="${args.variant}"
   >
@@ -33,4 +31,4 @@ Default.args = {
 export const Typing = BaseTemplate.bind();
 Typing.args = {
   variant: 'typing'
-};
+};

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.css

@@ -0,0 +1,25 @@
+pds-modal-content {
+  display: block;
+  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) {
+  border-block-end: 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) {
+  border-block-start: 1px solid var(--pine-color-border-subtle);
+}
+pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom) {
+  border-block-end: 1px solid var(--pine-color-border-subtle);
+}
+
+.pds-modal-content {
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -0,0 +1,235 @@
+import { h, Host } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
+export class PdsModalContent {
+    constructor() {
+        /**
+         * 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() {
+        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 (h(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, h("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
+                'pds-modal-content': true,
+                [`pds-modal-content--border-${this.border}`]: true
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
+    }
+    static get is() { return "pds-modal-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "border": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'none' | 'both' | 'top' | 'bottom'",
+                    "resolved": "\"both\" | \"bottom\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "The border style for the content area. When not explicitly set, automatically determined based on scroll state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "border",
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentMaxHeight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.css

@@ -0,0 +1,8 @@
+pds-modal-footer {
+  display: block;
+  width: 100%;
+}
+
+.pds-modal__footer {
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * Holds the modal's actions. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
+ * @lightDom renders-markup
+ */
+export class PdsModalFooter {
+    // Unwraps a nested .pds-modal__footer left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
+    }
+    render() {
+        return (h("footer", { key: '3ea8f3a2b955f75682f7ab212f4fc7b05a13cbba', class: "pds-modal__footer" }, h("slot", { key: 'e9e53c0d225e48ec1f271646907194421ab2bc68' })));
+    }
+    static get is() { return "pds-modal-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-footer.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.css

@@ -0,0 +1,8 @@
+pds-modal-header {
+  display: block;
+  width: 100%;
+}
+
+.pds-modal__header {
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * Holds the modal's title and close control. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
+ * @lightDom renders-markup
+ */
+export class PdsModalHeader {
+    // Unwraps a nested .pds-modal__header left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
+    }
+    render() {
+        return (h("header", { key: '9778bdebb88711827eeb0268298e269b920999bd', class: "pds-modal__header" }, h("slot", { key: 'e806f49f030839540317cf524ec6058388606cc9' })));
+    }
+    static get is() { return "pds-modal-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-header.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/pds-modal/pds-modal.css

@@ -0,0 +1,142 @@
+.pds-modal__backdrop {
+  align-items: flex-start;
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background-color: rgba(0, 0, 0, 0.4);
+  border: 0;
+  display: flex;
+  height: 100%;
+  inset: 0;
+  justify-content: center;
+  margin: 0;
+  max-height: 100%;
+  max-width: 100%;
+  opacity: 0;
+  padding: 0;
+  position: fixed;
+  transition: opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);
+  visibility: hidden;
+  width: 100%;
+  z-index: var(--pine-z-index-modal);
+}
+@supports (backdrop-filter: blur(3px)) {
+  .pds-modal__backdrop {
+    backdrop-filter: blur(3px);
+  }
+}
+pds-modal pds-modal .pds-modal__backdrop {
+  z-index: var(--pine-z-index-priority);
+}
+.pds-modal__backdrop::backdrop {
+  background: transparent;
+}
+.pds-modal__backdrop[aria-modal=false] {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+@supports (backdrop-filter: blur(3px)) {
+  .pds-modal__backdrop[aria-modal=false] {
+    backdrop-filter: none;
+  }
+  .pds-modal__backdrop[aria-modal=false]::before {
+    backdrop-filter: blur(3px);
+    content: "";
+    inset: 0;
+    position: fixed;
+    z-index: -1;
+  }
+}
+.pds-modal__backdrop.open {
+  opacity: 1;
+  transition-timing-function: var(--pine-motion-easing-out);
+  visibility: visible;
+}
+
+.pds-modal {
+  background: var(--pine-color-background-overlay);
+  border-radius: var(--pine-dimension-sm);
+  box-shadow: var(--pine-box-shadow-400);
+  display: flex;
+  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 {
+    margin-block-start: 6vh;
+  }
+  @supports (height: 100dvh) {
+    .pds-modal {
+      margin-block-start: 6dvh;
+    }
+  }
+}
+@media (min-width: 1200px) {
+  .pds-modal {
+    margin-block-start: 8vh;
+  }
+  @supports (height: 100dvh) {
+    .pds-modal {
+      margin-block-start: 8dvh;
+    }
+  }
+}
+
+.pds-modal--sm {
+  max-width: 520px;
+}
+
+.pds-modal--md {
+  max-width: 700px;
+}
+
+.pds-modal--lg {
+  max-width: 900px;
+}
+
+.pds-modal--custom {
+  max-width: var(--pds-modal-max-width, 700px);
+}
+
+.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 {
+  flex: 1;
+}
+
+.pds-modal--scrollable pds-modal-content {
+  border-block-end: 1px solid transparent;
+  border-block-start: 1px solid transparent;
+  overflow-y: auto;
+}
+
+.pds-modal:not(.pds-modal--scrollable) pds-modal-content {
+  overflow-y: visible;
+}