@pine-ds/core 3.5.1 → 3.6.0

package/dist/types/components/pds-box/pds-box.d.ts

@@ -2,18 +2,88 @@ import { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils
 export declare class PdsBox {
     /**
      * Defines how items within the box are aligned.
-     * @defaultValue start
+     * @defaultValue stretch
     */
     alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how items within the box are aligned at the XS breakpoint.
+     * @defaultValue stretch
+    */
+    alignItemsXs?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how items within the box are aligned at the SM breakpoint.
+     * @defaultValue stretch
+    */
+    alignItemsSm?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how items within the box are aligned at the MD breakpoint.
+     * @defaultValue stretch
+    */
+    alignItemsMd?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how items within the box are aligned at the LG breakpoint.
+     * @defaultValue stretch
+    */
+    alignItemsLg?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how items within the box are aligned at the XL breakpoint.
+     * @defaultValue stretch
+    */
+    alignItemsXl?: `start` | `center` | `end` | `baseline` | `stretch`;
     /**
      * Defines how the box is aligned within its container.
-     * @defaultValue start
+     * @defaultValue stretch
     */
     alignSelf?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how the box is aligned within its container at the XS breakpoint.
+     *
+    */
+    alignSelfXs?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how the box is aligned within its container at the SM breakpoint.
+     *
+    */
+    alignSelfSm?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how the box is aligned within its container at the MD breakpoint.
+     *
+    */
+    alignSelfMd?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how the box is aligned within its container at the LG breakpoint.
+     *
+    */
+    alignSelfLg?: `start` | `center` | `end` | `baseline` | `stretch`;
+    /**
+     * Defines how the box is aligned within its container at the XL breakpoint.
+     *
+    */
+    alignSelfXl?: `start` | `center` | `end` | `baseline` | `stretch`;
     /**
      * If `true`, the box will be sized to fit its contents.
      */
     auto?: boolean;
+    /**
+     * If `true`, the box will be sized to fit its contents at the XS breakpoint.
+     */
+    autoXs?: boolean;
+    /**
+     * If `true`, the box will be sized to fit its contents at the SM breakpoint.
+     */
+    autoSm?: boolean;
+    /**
+     * If `true`, the box will be sized to fit its contents at the MD breakpoint.
+     */
+    autoMd?: boolean;
+    /**
+     * If `true`, the box will be sized to fit its contents at the LG breakpoint.
+     */
+    autoLg?: boolean;
+    /**
+     * If `true`, the box will be sized to fit its contents at the XL breakpoint.
+     */
+    autoXl?: boolean;
     /**
      *  Defines the background-color of the box.
      */
@@ -45,16 +115,86 @@ export declare class PdsBox {
      * If `true`, sets the box `max-width` to `100%`.
      */
     fit?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.
+     */
+    fitXs?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the SM breakpoint.
+     */
+    fitSm?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the MD breakpoint.
+     */
+    fitMd?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the LG breakpoint.
+     */
+    fitLg?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the XL breakpoint.
+     */
+    fitXl?: boolean;
     /**
      * Defines the spacing between the box items.
      * @defaultValue none
     */
     gap?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    gapXs?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the SM breakpoint.
+     * @defaultValue none
+    */
+    gapSm?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the MD breakpoint.
+     * @defaultValue none
+    */
+    gapMd?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the LG breakpoint.
+     * @defaultValue none
+    */
+    gapLg?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XL breakpoint.
+     * @defaultValue none
+    */
+    gapXl?: BoxTShirtSizeType;
     /**
      * Defines whether flex items are forced onto one line or can wrap onto multiple lines.
      * @defaultValue false
      */
     wrap?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.
+     * @defaultValue false
+     */
+    wrapXs?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the SM breakpoint.
+     * @defaultValue false
+     */
+    wrapSm?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the MD breakpoint.
+     * @defaultValue false
+     */
+    wrapMd?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the LG breakpoint.
+     * @defaultValue false
+     */
+    wrapLg?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the XL breakpoint.
+     * @defaultValue false
+     */
+    wrapXl?: boolean;
     /**
      * Defines how a box will grow or shrink to fit the space available in its container.
      * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').
@@ -65,27 +205,152 @@ export declare class PdsBox {
      * Defines the horizontal alignment of the box items.
      * @defaultValue start
     */
-    justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;
+    justifyContent?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
+    /**
+     * Defines the horizontal alignment of the box items at the XS breakpoint.
+     * @defaultValue start
+    */
+    justifyContentXs?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
+    /**
+     * Defines the horizontal alignment of the box items at the SM breakpoint.
+     * @defaultValue start
+    */
+    justifyContentSm?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
+    /**
+     * Defines the horizontal alignment of the box items at the MD breakpoint.
+     * @defaultValue start
+    */
+    justifyContentMd?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
+    /**
+     * Defines the horizontal alignment of the box items at the LG breakpoint.
+     * @defaultValue start
+    */
+    justifyContentLg?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
+    /**
+     * Defines the horizontal alignment of the box items at the XL breakpoint.
+     * @defaultValue start
+    */
+    justifyContentXl?: `start` | `center` | `end` | `space-between` | `space-around` | `space-evenly`;
     /**
      * Defines the box's outer top spacing.
      * @defaultValue none
     */
     marginBlockStart?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer left spacing.
      * @defaultValue none
     */
     marginInlineStart?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer right spacing.
      * @defaultValue none
     */
     marginInlineEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer bottom spacing.
      * @defaultValue none
     */
     marginBlockEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXl?: BoxTShirtSizeType;
     /**
      * The minimum height of the row. Used in conjunction with alignment props
      */
@@ -123,26 +388,151 @@ export declare class PdsBox {
      * @defaultValue none
     */
     padding?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingXs?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingSm?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingMd?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingLg?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingXl?: BoxTShirtSizeType;
     /**
      * Defines the top spacing.
      * @defaultValue none
     */
     paddingBlockStart?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXl?: BoxTShirtSizeType;
     /**
      * Defines the bottom spacing.
      * @defaultValue none
     */
     paddingBlockEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXl?: BoxTShirtSizeType;
     /**
      * Defines the left spacing.
      * @defaultValue none
     */
     paddingInlineStart?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXl?: BoxTShirtSizeType;
     /**
      * Defines the right spacing.
      * @defaultValue none
     */
     paddingInlineEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXl?: BoxTShirtSizeType;
     /**
      * Defines the box shadow.
      * @defaultValue none

package/dist/types/components/pds-button/pds-button.d.ts

@@ -71,6 +71,10 @@ export declare class PdsButton {
      */
     variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
     pdsClick: EventEmitter;
+    /**
+     * Listen for Enter key presses on form inputs to trigger submit
+     */
+    handleFormKeyDown(event: KeyboardEvent): void;
     private handleClick;
     private classNames;
     private hasSlotContent;

package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts

@@ -6,17 +6,34 @@ declare global {
 export declare class PdsModalContent {
     el: HTMLPdsModalContentElement;
     /**
-     * The border style for the content area. Automatically set based on available space of the modal content.
+     * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
      * @default 'none'
      */
     border: 'none' | 'both' | 'top' | 'bottom';
     contentMaxHeight: string;
+    /**
+     * Tracks whether the border prop was explicitly set by the user
+     */
+    private userSetBorder;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Handle scroll events
+     */
+    private handleScroll;
+    /**
+     * Handle resize events
+     */
+    private handleResize;
     /**
      * Calculates the max-height based on header and footer heights
      */
     private mutationObserver;
+    /**
+     * Updates border visibility based on scroll state (only if not user-defined)
+     */
+    private updateBorders;
     /**
      * Calculates the max-height based on header and footer heights
      */

package/dist/types/components/pds-modal/pds-modal.d.ts

@@ -23,6 +23,11 @@ export declare class PdsModal {
      * @default 'md'
      */
     size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Whether the modal content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
     /**
      * Emitted when the modal is opened
      */

package/dist/types/components/pds-modal/test/mock-pds-modal.d.ts

@@ -20,6 +20,11 @@ export declare class MockPdsModal {
      * The size of the modal
      */
     size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Whether the modal content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
     /**
      * Whether the modal can be dismissed by clicking the backdrop
      */

package/dist/types/components/pds-row/pds-row.d.ts

@@ -13,6 +13,14 @@ export declare class PdsRow {
      * Defines the spacing between the row items.
      */
     colGap?: BoxTShirtSizeType | null;
+    /**
+     * Defines the spacing between the row items vertically.
+     */
+    colGapBlock?: BoxTShirtSizeType | null;
+    /**
+     * Defines the spacing between the row items horizontally.
+     */
+    colGapInline?: BoxTShirtSizeType | null;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */

package/dist/types/components/pds-textarea/pds-textarea.d.ts

@@ -9,6 +9,8 @@ export declare class PdsTextarea {
     private inheritedAttributes;
     private originalPdsInput?;
     private internals?;
+    private resizeObserver?;
+    private characterCounter?;
     el: HTMLPdsTextareaElement;
     /**
      * Emitted when the input loses focus.
@@ -99,6 +101,10 @@ export declare class PdsTextarea {
      * Sets number of rows of text visible without needing to scroll in the textarea.
      */
     rows?: number;
+    /**
+     * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.
+     */
+    maxLength?: number;
     /**
      * The value of the textarea.
      */
@@ -113,6 +119,7 @@ export declare class PdsTextarea {
      * Update the native input element when the value changes
      */
     protected valueChanged(): void;
+    protected maxLengthChanged(): void;
     /**
      * Emits an `pdsInput` event.
      */
@@ -128,8 +135,21 @@ export declare class PdsTextarea {
     private onTextareaChange;
     private textareaClassNames;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    /**
+     * Sets up ResizeObserver to track textarea resize for character counter positioning
+     */
+    private setupResizeObserver;
+    /**
+     * Updates character counter position to stay within textarea boundaries during resize
+     */
+    private updateCharacterCounterPosition;
+    /**
+     * Renders the character counter when maxLength is set
+     */
+    private renderCharacterCounter;
     private renderAction;
     /**
      * Updates the form value using ElementInternals API