@pine-ds/core 3.5.2 → 3.6.0

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

@@ -40,18 +40,36 @@ pds-modal .pds-modal__backdrop {
   display: flex;
   flex-direction: column;
   margin: var(--pine-dimension-md);
-  max-height: calc(100vh - (5vh + 96px));
+  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 {
@@ -73,7 +91,30 @@ pds-modal .pds-modal__backdrop {
   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;
 }

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

@@ -17,6 +17,11 @@ export class PdsModal {
          * @default 'md'
          */
         this.size = 'md';
+        /**
+         * Whether the modal content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
         /**
          * Stores the list of focusable elements in the modal
          */
@@ -227,10 +232,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: 'd8521939e6a88f64e1787840aa99fd1ec5899254', class: {
+        return (h("dialog", { key: '57daacecb0d85c643c1fe17b98046dcc98f982cb', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '89b838aa26621957de1caf77c27be855d17acb0a', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, h("slot", { key: '107062efee2afb25eddba26d0d468695401dd5ba' }))));
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '9fe239071cb2679dd626bc3cf8fd94abe9c1bee0', class: {
+                'pds-modal': true,
+                [`pds-modal--${this.size}`]: true,
+                'pds-modal--scrollable': this.scrollable
+            } }, h("slot", { key: '59edffec7f550550a03ce2100eb3aeb2be99902b' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -332,6 +341,29 @@ export class PdsModal {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'md'"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the modal content should be scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scrollable",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-modal.js","sourceRoot":"","sources":["../../../src/components/pds-modal/pds-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["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  // Modal content is always scrollable by default\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={`pds-modal pds-modal--${this.size} pds-modal--scrollable`}\n        >\n          <slot></slot>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-modal.js","sourceRoot":"","sources":["../../../src/components/pds-modal/pds-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -11,6 +11,7 @@ export default {
     backdropDismiss: true,
     componentId: 'modal-demo',
     open: false,
+    scrollable: true,
     size: 'md',
   },
   parameters: {
@@ -31,7 +32,9 @@ const BaseTemplate = (args) => html`
       component-id="${args.componentId}"
       size="${args.size}"
       ?backdrop-dismiss=${args.backdropDismiss}
+      scrollable="${args.scrollable}"
       ?open=${args.open}
+      key="${args.scrollable ? 'scrollable' : 'non-scrollable'}"
     >
       <pds-modal-header>
         <pds-box direction="column" fit padding="md">
@@ -413,3 +416,245 @@ Fullscreen.args = {
   componentId: 'fullscreen-modal',
   open: false,
 };
+
+const NonScrollableTemplate = (args) => html`
+  <div style="padding: 1rem;">
+    <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">
+      Open Non-Scrollable Modal
+    </pds-button>
+
+    <pds-modal
+      id="${args.componentId}"
+      component-id="${args.componentId}"
+      size="${args.size}"
+      ?backdrop-dismiss=${args.backdropDismiss}
+      scrollable="${args.scrollable}"
+      ?open=${args.open}
+      key="${args.scrollable ? 'scrollable' : 'non-scrollable'}"
+    >
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box
+            align-items="center"
+            fit
+            justify-content="space-between"
+          >
+            <pds-text tag="h2" size="h3">Non-Scrollable Modal</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+              aria-label="Close modal"
+              part="close-button"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+          <pds-box>
+            <pds-text tag="p" size="md">Content overflow is handled naturally</pds-text>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content>
+        <pds-box direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This is ideal for modals with fixed-height content or custom overflow handling.</p>
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This is ideal for modals with fixed-height content or custom overflow handling.</p>
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This is ideal for modals with fixed-height content or custom overflow handling.</p>
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This is ideal for modals with fixed-height content or custom overflow handling.</p>
+          <p>This modal has scrollable=false, so content will overflow naturally.</p>
+          <p>Use this when you want to control overflow behavior differently.</p>
+          <p>This is ideal for modals with fixed-height content or custom overflow handling.</p>
+        </pds-box>
+      </pds-modal-content>
+
+      <pds-modal-footer>
+        <pds-box
+          justify-content="space-between"
+          fit
+          padding="md"
+        >
+          <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+          <pds-box gap="sm" justify-content="end">
+            <pds-button
+              variant="secondary"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+            >
+              Cancel
+            </pds-button>
+            <pds-button variant="primary">Confirm</pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const NonScrollable = NonScrollableTemplate.bind({});
+NonScrollable.args = {
+  size: 'md',
+  componentId: 'non-scrollable-modal',
+  scrollable: false,
+  open: false,
+};
+
+const CustomBordersTemplate = () => html`
+  <div style="padding: 1rem;">
+    <pds-box gap="sm" direction="column">
+      <pds-text tag="h3" size="h4">Border Examples</pds-text>
+      <pds-box gap="sm" wrap>
+        <pds-button id="show-modal-none" onClick="document.querySelector('#border-none-modal').open = true">
+          border="none"
+        </pds-button>
+        <pds-button id="show-modal-top" onClick="document.querySelector('#border-top-modal').open = true">
+          border="top"
+        </pds-button>
+        <pds-button id="show-modal-bottom" onClick="document.querySelector('#border-bottom-modal').open = true">
+          border="bottom"
+        </pds-button>
+        <pds-button id="show-modal-both" onClick="document.querySelector('#border-both-modal').open = true">
+          border="both"
+        </pds-button>
+      </pds-box>
+    </pds-box>
+
+    <!-- Border None Modal -->
+    <pds-modal id="border-none-modal" component-id="border-none-modal" size="sm">
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box align-items="center" fit justify-content="space-between">
+            <pds-text tag="h2" size="h3">No Borders</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#border-none-modal').open = false"
+              aria-label="Close modal"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content border="none">
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This modal content has <code>border="none"</code></p>
+          <p>No borders will be shown regardless of content length or scroll position.</p>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box fit justify-content="end" padding="md" gap="sm">
+          <pds-button onclick="document.querySelector('#border-none-modal').open = false">Close</pds-button>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+
+    <!-- Border Top Modal -->
+    <pds-modal id="border-top-modal" component-id="border-top-modal" size="sm">
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box align-items="center" fit justify-content="space-between">
+            <pds-text tag="h2" size="h3">Top Border Only</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#border-top-modal').open = false"
+              aria-label="Close modal"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content border="top">
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This modal content has <code>border="top"</code></p>
+          <p>Only the top border is visible, indicating there's content above.</p>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box fit justify-content="end" padding="md" gap="sm">
+          <pds-button onclick="document.querySelector('#border-top-modal').open = false">Close</pds-button>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+
+    <!-- Border Bottom Modal -->
+    <pds-modal id="border-bottom-modal" component-id="border-bottom-modal" size="sm">
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box align-items="center" fit justify-content="space-between">
+            <pds-text tag="h2" size="h3">Bottom Border Only</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#border-bottom-modal').open = false"
+              aria-label="Close modal"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content border="bottom">
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This modal content has <code>border="bottom"</code></p>
+          <p>Only the bottom border is visible, indicating there's content below.</p>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box fit justify-content="end" padding="md" gap="sm">
+          <pds-button onclick="document.querySelector('#border-bottom-modal').open = false">Close</pds-button>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+
+    <!-- Border Both Modal -->
+    <pds-modal id="border-both-modal" component-id="border-both-modal" size="sm">
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box align-items="center" fit justify-content="space-between">
+            <pds-text tag="h2" size="h3">Both Borders</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#border-both-modal').open = false"
+              aria-label="Close modal"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content border="both">
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This modal content has <code>border="both"</code></p>
+          <p>Both top and bottom borders are visible, indicating content above and below.</p>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box fit justify-content="end" padding="md" gap="sm">
+          <pds-button onclick="document.querySelector('#border-both-modal').open = false">Close</pds-button>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const CustomBorders = CustomBordersTemplate.bind({});
+CustomBorders.args = {
+  componentId: 'custom-borders-modal',
+};

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -9,7 +9,11 @@ export class MockPdsModal {
          * The size of the modal
          */
         this.size = 'md';
-        // Modal content is always scrollable by default
+        /**
+         * Whether the modal content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
         /**
          * Whether the modal can be dismissed by clicking the backdrop
          */
@@ -63,13 +67,13 @@ export class MockPdsModal {
         const modalClasses = {
             'pds-modal': true,
             [`pds-modal--${this.size}`]: true,
-            'pds-modal--scrollable': true, // Always scrollable by default
+            'pds-modal--scrollable': this.scrollable
         };
         const backdropClasses = {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '1add4d6197e52590f97de144745dc7e13b79fc2f', class: backdropClasses }, h("div", { key: 'f9e0dcf40e353041a4b135eb687a89b99352a86e', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, h("div", { key: 'a0eff71ed114a48f588f2eab147a12ecd513ef23', class: "pds-modal__header" }, h("slot", { key: '0b58df0cc5241ffffa459f07f913c490fff3adce', name: "header" })), h("div", { key: '41e5ee8b58bb60bcc8f1aa72a7b24839a68a2e9f', class: "pds-modal-content" }, h("slot", { key: '4c9a073f2d6ddcd7942ec1f1839886c0868c15a3' })), h("div", { key: '89d542843d68c860fe2526bbc05fac4893c3d616', class: "pds-modal__footer" }, h("slot", { key: '1d5720bc3a86d97309c015d3c98ee25f85ef7c34', name: "footer" })))));
+        return (h("div", { key: '0fccdb57d79f636ec3b5782943ddd76fbc9ce171', class: backdropClasses }, h("div", { key: '341963284bfbcd1f99df53e346ed3257b00dbeb2', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, h("div", { key: '8ff526d8c2d8c0696f9fff107928cf9cb59dbdad', class: "pds-modal__header" }, h("slot", { key: '8746d9cb026e70b293be00f71ffa2939d80947ee', name: "header" })), h("div", { key: '48b98256d3114016de8279012e2c496726f766ba', class: "pds-modal-content" }, h("slot", { key: '49ff7217a2c8d59c56751c850c4372329e263e7b' })), h("div", { key: 'd46d11d288bff5a4539d0cb4b2c7ea2111687ebf', class: "pds-modal__footer" }, h("slot", { key: '549d4f33a78db562b5afce77cc108cc22f474a0d', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {
@@ -123,6 +127,29 @@ export class MockPdsModal {
                 "reflect": false,
                 "defaultValue": "'md'"
             },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the modal content should be scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scrollable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "backdropDismiss": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/pds-modal/test/mock-pds-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-pds-modal.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/test/mock-pds-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAWzF;;;GAGG;AAMH,MAAM,OAAO,YAAY;IALzB;QAaE;;WAEG;QACK,SAAI,GAAsC,IAAI,CAAC;QAEvD,gDAAgD;QAEhD;;WAEG;QACK,oBAAe,GAAG,IAAI,CAAC;QAE/B,+FAA+F;QAE/F;;WAEG;QACsB,SAAI,GAAG,KAAK,CAAC;KAkGvC;IA/EC;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iEAAiE;IACjE,mBAAmB,CAAC,KAAiB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC/D,2EAA2E;QAC3E,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE,CAAC;YAC/D,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;YAClC,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,iEAAiE;IACjE,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACjD,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,0DAA0D;IAC5D,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACjC,uBAAuB,EAAE,IAAI,EAAE,+BAA+B;SAC/D,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,qBAAqB,EAAE,IAAI;YAC3B,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,UAAU,CAAC,CAAC,CAAC,IAAI;gBAExE,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,8DAAa,CACT;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, Method, Element, h } from '@stencil/core';\n\n// Define the element interface for the mock component\ninterface HTMLMockPdsModalElement extends HTMLElement {\n  open: boolean;\n  showModal: () => Promise<void>;\n  hideModal: () => Promise<void>;\n  handleBackdropClick: (event: MouseEvent) => void;\n  handleKeyDown: (event: KeyboardEvent) => void;\n}\n\n/**\n * Mock PdsModal component for testing purposes\n * This component mimics the real PdsModal but without using the Popover API\n */\n@Component({\n  tag: 'mock-pds-modal',\n  styleUrl: '../pds-modal.scss',\n  shadow: false,\n})\nexport class MockPdsModal {\n  @Element() el!: HTMLMockPdsModalElement;\n\n  /**\n   * The ID of the modal component\n   */\n  @Prop() componentId?: string;\n\n  /**\n   * The size of the modal\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  // Modal content is always scrollable by default\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   */\n  @Prop() backdropDismiss = true;\n\n  // Native dialog element always closes on Escape key press, so no closeOnEsc property is needed\n\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open = false;\n\n  // No need for modalRef in the mock implementation\n\n  /**\n   * Event emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter;\n\n  /**\n   * Event emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter;\n\n  /**\n   * Event emitted when the backdrop is clicked\n   */\n  @Event() pdsModalBackdropClick: EventEmitter;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async showModal() {\n    this.open = true;\n    this.pdsModalOpen.emit();\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hideModal() {\n    this.open = false;\n    this.pdsModalClose.emit();\n  }\n\n  /**\n   * Listen for click events on the backdrop\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleBackdropClick(event: MouseEvent) {\n    const backdrop = this.el.querySelector('.pds-modal__backdrop');\n    // Check if the click was directly on the backdrop (not on a child element)\n    if (event.target === backdrop && this.backdropDismiss === true) {\n      this.pdsModalBackdropClick.emit();\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Listen for keydown events to handle Escape key\n   * Native dialog element always closes on Escape key press\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open === true) {\n      this.hideModal();\n    }\n  }\n\n  componentDidLoad() {\n    // No need to do anything in componentDidLoad for the mock\n  }\n\n  render() {\n    const modalClasses = {\n      'pds-modal': true,\n      [`pds-modal--${this.size}`]: true,\n      'pds-modal--scrollable': true, // Always scrollable by default\n    };\n\n    const backdropClasses = {\n      'pds-modal__backdrop': true,\n      'open': this.open,\n    };\n\n    return (\n      <div class={backdropClasses}>\n        <div\n          class={modalClasses}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.componentId ? `${this.componentId}-heading` : null}\n        >\n          <div class=\"pds-modal__header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"pds-modal-content\">\n            <slot></slot>\n          </div>\n          <div class=\"pds-modal__footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mock-pds-modal.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/test/mock-pds-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAWzF;;;GAGG;AAMH,MAAM,OAAO,YAAY;IALzB;QAaE;;WAEG;QACK,SAAI,GAAsC,IAAI,CAAC;QAEvD;;;WAGG;QACK,eAAU,GAAG,IAAI,CAAC;QAE1B;;WAEG;QACK,oBAAe,GAAG,IAAI,CAAC;QAE/B,+FAA+F;QAE/F;;WAEG;QACsB,SAAI,GAAG,KAAK,CAAC;KAkGvC;IA/EC;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iEAAiE;IACjE,mBAAmB,CAAC,KAAiB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC/D,2EAA2E;QAC3E,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE,CAAC;YAC/D,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;YAClC,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,iEAAiE;IACjE,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACjD,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,0DAA0D;IAC5D,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACjC,uBAAuB,EAAE,IAAI,CAAC,UAAU;SACzC,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,qBAAqB,EAAE,IAAI;YAC3B,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,UAAU,CAAC,CAAC,CAAC,IAAI;gBAExE,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,8DAAa,CACT;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, Method, Element, h } from '@stencil/core';\n\n// Define the element interface for the mock component\ninterface HTMLMockPdsModalElement extends HTMLElement {\n  open: boolean;\n  showModal: () => Promise<void>;\n  hideModal: () => Promise<void>;\n  handleBackdropClick: (event: MouseEvent) => void;\n  handleKeyDown: (event: KeyboardEvent) => void;\n}\n\n/**\n * Mock PdsModal component for testing purposes\n * This component mimics the real PdsModal but without using the Popover API\n */\n@Component({\n  tag: 'mock-pds-modal',\n  styleUrl: '../pds-modal.scss',\n  shadow: false,\n})\nexport class MockPdsModal {\n  @Element() el!: HTMLMockPdsModalElement;\n\n  /**\n   * The ID of the modal component\n   */\n  @Prop() componentId?: string;\n\n  /**\n   * The size of the modal\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   * Whether the modal can be dismissed by clicking the backdrop\n   */\n  @Prop() backdropDismiss = true;\n\n  // Native dialog element always closes on Escape key press, so no closeOnEsc property is needed\n\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open = false;\n\n  // No need for modalRef in the mock implementation\n\n  /**\n   * Event emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter;\n\n  /**\n   * Event emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter;\n\n  /**\n   * Event emitted when the backdrop is clicked\n   */\n  @Event() pdsModalBackdropClick: EventEmitter;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async showModal() {\n    this.open = true;\n    this.pdsModalOpen.emit();\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hideModal() {\n    this.open = false;\n    this.pdsModalClose.emit();\n  }\n\n  /**\n   * Listen for click events on the backdrop\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleBackdropClick(event: MouseEvent) {\n    const backdrop = this.el.querySelector('.pds-modal__backdrop');\n    // Check if the click was directly on the backdrop (not on a child element)\n    if (event.target === backdrop && this.backdropDismiss === true) {\n      this.pdsModalBackdropClick.emit();\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Listen for keydown events to handle Escape key\n   * Native dialog element always closes on Escape key press\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open === true) {\n      this.hideModal();\n    }\n  }\n\n  componentDidLoad() {\n    // No need to do anything in componentDidLoad for the mock\n  }\n\n  render() {\n    const modalClasses = {\n      'pds-modal': true,\n      [`pds-modal--${this.size}`]: true,\n      'pds-modal--scrollable': this.scrollable\n    };\n\n    const backdropClasses = {\n      'pds-modal__backdrop': true,\n      'open': this.open,\n    };\n\n    return (\n      <div class={backdropClasses}>\n        <div\n          class={modalClasses}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.componentId ? `${this.componentId}-heading` : null}\n        >\n          <div class=\"pds-modal__header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"pds-modal-content\">\n            <slot></slot>\n          </div>\n          <div class=\"pds-modal__footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 :host {
-  display: inline;
+  display: inline-block;
+  width: 100%;
 }
 
 :host([aria-readonly=true]) textarea {
@@ -34,13 +35,42 @@ label {
   margin-block-end: 0;
 }
 
+.pds-textarea__helper-message {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-textarea__error-message {
+  align-items: center;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-textarea__field-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+
 .pds-textarea__field {
   background-color: var(--pine-color-background-container);
   border: var(--pine-border);
   border-radius: calc(var(--pine-dimension-xs) * 1.25);
+  box-sizing: border-box;
   font: var(--pine-typography-body);
   letter-spacing: var(--pine-letter-spacing);
+  min-height: calc(var(--pine-dimension-xl) * 2);
+  min-width: calc(var(--pine-dimension-xl) * 2);
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+  resize: both;
+  width: 100%;
+}
+:host([max-length]) .pds-textarea__field {
+  padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));
 }
 .pds-textarea__field:hover:not(:disabled, .is-invalid) {
   border: var(--pine-border-hover);
@@ -65,18 +95,28 @@ label {
   outline-color: var(--pine-color-focus-ring-danger);
 }
 
-.pds-textarea__error-message,
-.pds-textarea__helper-message {
-  color: var(--pine-color-text-message);
+.pds-textarea__character-counter {
+  background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);
+  border-radius: calc(var(--pine-dimension-2xs) * 0.5);
+  color: var(--pine-color-text-readonly);
   font: var(--pine-typography-body-sm-medium);
-  margin-block-start: var(--pine-dimension-xs);
+  padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);
+  pointer-events: none;
+  position: absolute;
+  user-select: none;
+  white-space: nowrap;
+  z-index: 2;
 }
-
-.pds-textarea__error-message {
-  align-items: center;
-  color: var(--pine-color-text-message-danger);
-  display: flex;
-  gap: var(--pine-dimension-2xs);
+:host([aria-disabled=true]) .pds-textarea__character-counter {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-disabled);
+}
+:host([aria-readonly=true]) .pds-textarea__character-counter {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+.pds-textarea__field.is-invalid ~ .pds-textarea__character-counter {
+  background-color: var(--pine-input-color-background-danger);
 }
 
 .visually-hidden {