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

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

@@ -0,0 +1,194 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-NNDTPCWx.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.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) {
+        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;
+    }
+    // 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.calculateMaxHeight();
+        // Set up resize listener
+        window.addEventListener('resize', this.handleResize.bind(this));
+        // Only set up scroll listener for border updates if borders are managed automatically
+        if (!this.userSetBorder) {
+            setTimeout(() => {
+                // The scroll happens on the component element itself (this.el), not the inner div
+                this.el.addEventListener('scroll', this.handleScroll.bind(this));
+                // Initial border update after everything is set up
+                setTimeout(() => this.updateBorders(), 100);
+            }, 100);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize.bind(this));
+        // Clean up scroll listener only if it was set up
+        if (!this.userSetBorder) {
+            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Handle scroll events
+     */
+    handleScroll() {
+        this.updateBorders();
+    }
+    /**
+     * Handle resize events
+     */
+    handleResize() {
+        this.calculateMaxHeight();
+        // Update borders after resize as content scrollability might change
+        setTimeout(() => this.updateBorders(), 50);
+    }
+    /**
+     * 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: 'f3e75b90be56bb27ba5f4fde473fac474846f346' }, h("div", { key: '5035d5fa319fe2aaa8adffb825f0d2babfd11a26', class: {
+                'pds-modal-content': true,
+                [`pds-modal-content--border-${this.border}`]: true
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '73299f6f7045ea50a5bf134da04f1e30cd9f233c' }))));
+    }
+    get el() { return getElement(this); }
+};
+PdsModalContent.style = pdsModalContentCss();
+
+export { PdsModalContent as pds_modal_content };

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

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, a as getElement } from './index-NNDTPCWx.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+
+const pdsModalFooterCss = () => `pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}`;
+
+const PdsModalFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // 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: '1220d6319585df0128924ebac52569af7645f525', class: "pds-modal__footer" }, h("slot", { key: '1bbbf4897f41c802fc5773154cee3930290c906a' })));
+    }
+    get el() { return getElement(this); }
+};
+PdsModalFooter.style = pdsModalFooterCss();
+
+export { PdsModalFooter as pds_modal_footer };

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

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, a as getElement } from './index-NNDTPCWx.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+
+const pdsModalHeaderCss = () => `pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}`;
+
+const PdsModalHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // 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: '0fd8a216ae8dc149b59cd29c8706d5a45a21de15', class: "pds-modal__header" }, h("slot", { key: '4bf075dfd4870621e6e0b710fcdb42aac53810b3' })));
+    }
+    get el() { return getElement(this); }
+};
+PdsModalHeader.style = pdsModalHeaderCss();
+
+export { PdsModalHeader as pds_modal_header };

package/dist/esm/pds-modal.entry.js

@@ -0,0 +1,295 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-NNDTPCWx.js';
+import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+
+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 var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);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 ((-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;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pdsModalOpen = createEvent(this, "pdsModalOpen");
+        this.pdsModalClose = createEvent(this, "pdsModalClose");
+        this.focusableElements = [];
+        /**
+         * Whether the modal can be dismissed by clicking the backdrop
+         * @default true
+         */
+        this.backdropDismiss = true;
+        /**
+         * Whether the modal is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * The size of the modal
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Whether the modal content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
+        /**
+         * Whether the modal opens outside the browser top layer as a non-modal dialog.
+         * When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
+         * overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
+         * above it via `z-index`. The page is not made inert and focus is not trapped in
+         * this mode. Read when the modal opens; changing it while the modal is open is
+         * not supported.
+         * @default false
+         */
+        this.disableTopLayer = false;
+        /**
+         * Stores the list of focusable elements in the modal
+         */
+        this.focusableElementsArray = [];
+        this.handleBackdropClick = (e) => {
+            if (!this.backdropDismiss || !this.open)
+                return;
+            if (e.target.classList.contains('pds-modal__backdrop')) {
+                e.stopPropagation();
+                // Only close if this is the innermost modal
+                if (this.isInnermostModal()) {
+                    this.hideModal();
+                }
+            }
+        };
+        this.handleKeyDown = (e) => {
+            // If the modal is not open, don't handle any keyboard events
+            if (!this.open)
+                return;
+            // Handle Escape key to close the modal
+            if (e.key === 'Escape') {
+                // In non-top-layer mode, focus can move into an overlay stacked above the
+                // modal (the reason disableTopLayer exists). If that overlay owns focus,
+                // leave Escape to it rather than dismissing this modal out from under it.
+                const active = document.activeElement;
+                if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
+                    return;
+                }
+                // Always prevent native dialog close behavior
+                e.preventDefault();
+                // Only close if backdropDismiss is enabled and this is the innermost modal
+                if (this.backdropDismiss && this.isInnermostModal()) {
+                    this.hideModal();
+                }
+                return;
+            }
+            // Handle Tab key for focus trapping
+            if (e.key === 'Tab') {
+                // In non-top-layer mode the modal is deliberately not focus-isolated: focus
+                // must be able to leave it into overlays stacked above (the whole point of
+                // disableTopLayer), so do not trap Tab here.
+                if (this.disableTopLayer)
+                    return;
+                // If there are no focusable elements, do nothing
+                if (this.focusableElements.length === 0)
+                    return;
+                // Get the first and last focusable elements
+                const firstFocusableElement = this.focusableElements[0];
+                const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
+                // Get the current active element
+                const activeElement = document.activeElement;
+                // Check if we need to wrap focus
+                const isFirstElement = activeElement === firstFocusableElement ||
+                    firstFocusableElement.contains(activeElement);
+                const isLastElement = activeElement === lastFocusableElement ||
+                    lastFocusableElement.contains(activeElement);
+                // If shift + tab is pressed and focus is on the first element, move to the last element
+                if (e.shiftKey && isFirstElement) {
+                    e.preventDefault();
+                    this.focusElement(lastFocusableElement);
+                }
+                // If tab is pressed and focus is on the last element, move to the first element
+                else if (!e.shiftKey && isLastElement) {
+                    e.preventDefault();
+                    this.focusElement(firstFocusableElement);
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        this.modalRef = this.el.querySelector('.pds-modal__backdrop');
+        // Add keyboard event listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    // Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-modal'), 'dialog.pds-modal__backdrop', '.pds-modal');
+    }
+    disconnectedCallback() {
+        // Clean up event listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
+    }
+    /**
+     * Updates the list of focusable elements in the modal
+     */
+    updateFocusableElements() {
+        if (!this.modalRef)
+            return;
+        // Get all focusable elements within the modal
+        const selector = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+            'pds-button:not([disabled])',
+            'pds-link:not([disabled])',
+            'pds-input:not([disabled])',
+            'pds-checkbox:not([disabled])',
+            'pds-radio:not([disabled])',
+            'pds-switch:not([disabled])',
+            'pds-select:not([disabled])',
+        ].join(',');
+        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
+        // Filter out elements with display: none or visibility: hidden
+        this.focusableElements = this.focusableElements.filter(el => {
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        });
+    }
+    /**
+     * Sets focus to the first focusable element in the modal
+     */
+    setInitialFocus() {
+        if (this.focusableElements.length === 0)
+            return;
+        // Focus the first focusable element
+        const firstElement = this.focusableElements[0];
+        // For web components, we need to ensure they're properly focused
+        this.focusElement(firstElement);
+    }
+    /**
+     * Helper method to focus an element, with special handling for web components
+     */
+    focusElement(element) {
+        if (!element)
+            return;
+        try {
+            // Try standard focus first
+            element.focus();
+            // Check if focus worked
+            setTimeout(() => {
+                if (document.activeElement !== element) {
+                    // For web components, try to find a focusable element inside
+                    if (element.shadowRoot) {
+                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
+                        if (focusableInShadow) {
+                            focusableInShadow.focus();
+                        }
+                    }
+                }
+            }, 0);
+        }
+        catch (error) {
+            console.error('Error focusing element:', error);
+        }
+    }
+    /**
+     * Opens the modal
+     */
+    async showModal() {
+        if (this.modalRef) {
+            try {
+                // Store the currently focused element to restore focus when modal closes
+                this.previousActiveElement = document.activeElement;
+                // showModal() promotes the dialog to the browser top layer (and makes the
+                // rest of the page inert), which prevents any overlay outside the dialog
+                // from ever painting above it. show() opens a non-modal dialog that stays
+                // in the normal stacking context so those overlays can stack above it.
+                if (this.disableTopLayer) {
+                    this.modalRef.show();
+                }
+                else {
+                    this.modalRef.showModal();
+                }
+                this.open = true;
+                // Update focusable elements and set initial focus
+                // Using a longer timeout to ensure all components are fully rendered
+                setTimeout(() => {
+                    this.updateFocusableElements();
+                    this.setInitialFocus();
+                    this.pdsModalOpen.emit();
+                }, 100);
+            }
+            catch (error) {
+                console.error('Failed to show modal:', error);
+            }
+        }
+    }
+    /**
+     * Closes the modal
+     */
+    async hideModal() {
+        if (this.modalRef) {
+            try {
+                this.modalRef.close();
+                this.open = false;
+                // Restore focus to the element that was focused before the modal was opened
+                if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+                    this.previousActiveElement.focus();
+                }
+                this.pdsModalClose.emit();
+            }
+            catch (error) {
+                console.error('Failed to hide modal:', error);
+            }
+        }
+    }
+    /**
+     * Gets the z-index of a modal's backdrop element
+     */
+    getBackdropZIndex(modal) {
+        const backdrop = modal.querySelector('.pds-modal__backdrop');
+        return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+    }
+    /**
+     * Checks if this modal is the innermost (highest z-index) modal
+     */
+    isInnermostModal() {
+        // Find all open modals
+        const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(modal => modal.open);
+        if (openModals.length === 0)
+            return false;
+        // Get this modal's backdrop element
+        const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');
+        if (!thisBackdrop)
+            return false;
+        // Get computed z-index of all open modal backdrops
+        const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));
+        // Get the highest z-index
+        const maxZIndex = Math.max(...modalZIndexes);
+        // Check if this modal's backdrop has the highest z-index
+        const thisZIndex = this.getBackdropZIndex(this.el);
+        return thisZIndex === maxZIndex;
+    }
+    render() {
+        return (h("dialog", { key: '134e913f0bf5d7bf77e67f00707a399fae986fcb', class: {
+                'pds-modal__backdrop': true,
+                'open': this.open
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '6cb819a92c00b5c8676b4d1a84301896373305f3', class: {
+                'pds-modal': true,
+                [`pds-modal--${this.size}`]: true,
+                'pds-modal--scrollable': this.scrollable
+            }, part: "modal" }, h("slot", { key: 'aff0f88a7b9e1b4b681a6a14636153ce3a6907d5' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+PdsModal.style = pdsModalCss();
+
+export { PdsModal as pds_modal };