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

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

@@ -1,14 +1,89 @@
-import { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';
+import { BoxColumnType, BoxSpacingType, BoxShadowSizeType } from '../../utils/types';
 export declare class PdsBox {
     /**
-     * Defines the vertical alignment of the box items.
-     * @defaultValue start
+     * Defines how items within the box are aligned.
+     * @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 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.
      */
@@ -17,10 +92,30 @@ export declare class PdsBox {
      * If `true`, the box will have a border.
      */
     border?: boolean;
+    /**
+     * If `true`, the box will have a border on the block-end edge. If `false`, the block-end edge will have no border.
+     * Overrides `border` for this edge.
+     */
+    borderBlockEnd?: boolean;
+    /**
+     * If `true`, the box will have a border on the block-start edge. If `false`, the block-start edge will have no border.
+     * Overrides `border` for this edge.
+     */
+    borderBlockStart?: boolean;
     /**
      *  Defines the border color of the box.
      */
     borderColor?: string;
+    /**
+     * If `true`, the box will have a border on the inline-end edge. If `false`, the inline-end edge will have no border.
+     * Overrides `border` for this edge.
+     */
+    borderInlineEnd?: boolean;
+    /**
+     * If `true`, the box will have a border on the inline-start edge. If `false`, the inline-start edge will have no border.
+     * Overrides `border` for this edge.
+     */
+    borderInlineStart?: boolean;
     /**
      * Defines how rounded the box corners are.
      * @defaultValue none
@@ -40,21 +135,242 @@ 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;
+    gap?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    gapXs?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the SM breakpoint.
+     * @defaultValue none
+    */
+    gapSm?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the MD breakpoint.
+     * @defaultValue none
+    */
+    gapMd?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the LG breakpoint.
+     * @defaultValue none
+    */
+    gapLg?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the XL breakpoint.
+     * @defaultValue none
+    */
+    gapXl?: BoxSpacingType;
+    /**
+     * 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').
      * @defaultValue none
      */
-    flex?: `none` | `grow` | `shrink`;
+    flex?: `none` | `grow` | `shrink` | string;
     /**
      * 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?: BoxSpacingType;
+    /**
+     * Defines the box's outer top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXs?: BoxSpacingType;
+    /**
+     * Defines the box's outer top spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartSm?: BoxSpacingType;
+    /**
+     * Defines the box's outer top spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartMd?: BoxSpacingType;
+    /**
+     * Defines the box's outer top spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartLg?: BoxSpacingType;
+    /**
+     * Defines the box's outer top spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXl?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing.
+     * @defaultValue none
+    */
+    marginInlineStart?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXs?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartSm?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartMd?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartLg?: BoxSpacingType;
+    /**
+     * Defines the box's outer left spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXl?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing.
+     * @defaultValue none
+    */
+    marginInlineEnd?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXs?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndSm?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndMd?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndLg?: BoxSpacingType;
+    /**
+     * Defines the box's outer right spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXl?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing.
+     * @defaultValue none
+    */
+    marginBlockEnd?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXs?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndSm?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndMd?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndLg?: BoxSpacingType;
+    /**
+     * Defines the box's outer bottom spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXl?: BoxSpacingType;
     /**
      * The minimum height of the row. Used in conjunction with alignment props
      */
@@ -91,34 +407,179 @@ export declare class PdsBox {
      * Defines the spacing between the box items.
      * @defaultValue none
     */
-    padding?: BoxTShirtSizeType;
+    padding?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingXs?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingSm?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingMd?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingLg?: BoxSpacingType;
+    /**
+     * Defines the spacing between the box items at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingXl?: BoxSpacingType;
+    /**
+     * Defines the top spacing.
+     * @defaultValue none
+    */
+    paddingBlockStart?: BoxSpacingType;
+    /**
+     * Defines the top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXs?: BoxSpacingType;
+    /**
+     * Defines the top spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartSm?: BoxSpacingType;
+    /**
+     * Defines the top spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartMd?: BoxSpacingType;
+    /**
+     * Defines the top spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartLg?: BoxSpacingType;
+    /**
+     * Defines the top spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXl?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing.
+     * @defaultValue none
+    */
+    paddingBlockEnd?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXs?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndSm?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndMd?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndLg?: BoxSpacingType;
+    /**
+     * Defines the bottom spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXl?: BoxSpacingType;
+    /**
+     * Defines the left spacing.
+     * @defaultValue none
+    */
+    paddingInlineStart?: BoxSpacingType;
+    /**
+     * Defines the left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXs?: BoxSpacingType;
+    /**
+     * Defines the left spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartSm?: BoxSpacingType;
+    /**
+     * Defines the left spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartMd?: BoxSpacingType;
+    /**
+     * Defines the left spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartLg?: BoxSpacingType;
+    /**
+     * Defines the left spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXl?: BoxSpacingType;
+    /**
+     * Defines the right spacing.
+     * @defaultValue none
+    */
+    paddingInlineEnd?: BoxSpacingType;
+    /**
+     * Defines the right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXs?: BoxSpacingType;
+    /**
+     * Defines the right spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndSm?: BoxSpacingType;
+    /**
+     * Defines the right spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndMd?: BoxSpacingType;
+    /**
+     * Defines the right spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndLg?: BoxSpacingType;
+    /**
+     * Defines the right spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXl?: BoxSpacingType;
     /**
      * Defines the box shadow.
      * @defaultValue none
     */
-    shadow?: BoxTShirtSizeType;
+    shadow?: BoxShadowSizeType;
     /**
-     * Size of the column for all screen sizes that are not explicitly set.
+     * Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.
      */
     size?: BoxColumnType;
     /**
-     * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.
+     * At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.
      */
     sizeXs?: BoxColumnType;
     /**
-     * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.
+     * At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.
      */
     sizeSm?: BoxColumnType;
     /**
-     * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.
+     * At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.
      */
     sizeMd?: BoxColumnType;
     /**
-     * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.
+     * At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.
      */
     sizeLg?: BoxColumnType;
     /**
-     * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.
+     * At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.
      */
     sizeXl?: BoxColumnType;
     render(): any;

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

@@ -1,7 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @part button - The main button element that represents the button component.
- * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
- * @part icon - The icon element that appears before the text in the button, if provided.
+ * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
+ * @part button-content - Exposes the button content for styling.
+ * @part button-text - Exposes the button text for styling.
+ * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
+ * @part icon - Exposes the icon component for styling.
+ * @part loader-svg - Exposes the loader SVG element for color customization. Appears only when loading.
+ * @slot (default) - Button text.
+ * @slot start - Content to display before the button text.
+ * @slot end - Content to display after the button text.
 */
 export declare class PdsButton {
     el: HTMLPdsButtonElement;
@@ -10,32 +17,83 @@ export declare class PdsButton {
      */
     componentId: string;
     /**
-     * Toggles disabled state of button
+     * Prompts the user to save the linked URL instead of navigating to it.
+     * It can be used without a value to download with the default filename,
+     * or with a string value to suggest a specific filename for the download.
+     * Only applies when href is set.
+     */
+    download?: string;
+    /**
+     * Determines the button's disabled state.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Determines if the button should take up the full width of its container.
      * @defaultValue false
      */
-    disabled?: boolean;
+    fullWidth?: boolean;
     /**
-     * Displays icon before text when icon string matches an icon name
+     * If provided, renders the component as an anchor (`<a>`) element instead of a button.
+     * When using href, button-specific props (type, name, value, loading) will be ignored.
+     */
+    href?: string;
+    /**
+     * Displays a leading icon in the button. DEPRECATED.
+     * @defaultValue null
+     * @deprecated Use `start` slot instead.
      */
     icon?: string;
     /**
-     * Provides button with a submittable name
+     * When true, displays only the icon and visually hides the text (keeping it accessible).
+     */
+    iconOnly?: boolean;
+    /**
+     * Determines if the button is in a loading state.
+     * When true, displays a loader and hides the button text.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * Provides the button with a submittable name.
      */
     name?: string;
     /**
-     * Provides button with a submittable value
+     * Specifies where to open the linked document when href is provided.
+     * Only applies when href is set.
      */
-    value?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
-     * Provides button with a type
+     * Provides button with a type.
      * @defaultValue button
      */
     type?: 'button' | 'reset' | 'submit';
     /**
-     * Sets button variant styles as outlined in Figma documentation
+     * Provides button with a submittable value
+     */
+    value?: string;
+    /**
+     * Sets the size of the button.
+     * @defaultValue default
+     */
+    size?: 'default' | 'small' | 'micro';
+    /**
+     * Sets the style variant of the button.
+     * @defaultValue primary
+     */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter';
+    hasStartContent: boolean;
+    hasEndContent: boolean;
+    pdsClick: EventEmitter<Event>;
+    /**
+     * Listen for Enter key presses on form inputs to trigger submit
      */
-    variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+    handleFormKeyDown(event: KeyboardEvent): void;
+    private handleStartSlotChange;
+    private handleEndSlotChange;
     private handleClick;
     private classNames;
+    private renderStartContent;
+    private renderEndContent;
     render(): any;
 }

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { CheckboxChangeEventDetail } from './checkbox-interface';
 export declare class PdsCheckbox {
+    private inheritedAttributes;
+    private internals?;
+    private readonly _type;
+    el: HTMLPdsCheckboxElement;
     /**
      * It determines whether or not the checkbox is checked.
      */
@@ -37,7 +41,7 @@ export declare class PdsCheckbox {
     /**
    * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
    */
-    labelHidden: boolean;
+    hideLabel: boolean;
     /**
      * String used for checkbox `name` attribute.
      */
@@ -59,5 +63,11 @@ export declare class PdsCheckbox {
     private handleCheckboxChange;
     private handleInput;
     private classNames;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    checkedChanged(): void;
+    private updateFormValue;
+    formStateRestoreCallback(state: string | FormData | null): void;
+    componentWillLoad(): void;
     render(): any;
 }