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

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

@@ -1,14 +1,96 @@
-import { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';
+import { BoxColumnType, BoxContainerType, BoxMarginType, BoxSpacingType, BoxShadowSizeType } from '../../utils/types';
+/**
+ * @lightDom host-only
+ */
 export declare class PdsBox {
+    el: HTMLPdsBoxElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
-     * 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,15 +99,44 @@ 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
      */
     borderRadius?: `none` | `xs` | `sm` | `md` | `lg` | `circle`;
+    /**
+     * Makes the box a size container by setting `container-type`. `inline-size` stops the box's
+     * content from setting its width, so long unwrapped text truncates instead of widening it, and
+     * lets children use container query units. `size` does the same for both axes, so the box needs
+     * a height from somewhere else. Either way the box still needs its width from its parent, such as
+     * the default `flex-grow`, `flex="grow"` or `fit`; with `flex="none"` or `flex="shrink"`, or the
+     * `auto` prop, it collapses.
+     */
+    container?: BoxContainerType;
     /**
      * Defines the orientation of the box items.
      * @defaultValue row
@@ -37,24 +148,247 @@ export declare class PdsBox {
     */
     display?: `flex` | `inline-flex` | `block` | `inline-block`;
     /**
-     * If `true`, sets the box `max-width` to `100%`.
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%`, so it fills its parent's width.
+     * A box in a `direction="column"` parent needs it when the parent sets `align-items`, and a box that isn't a flex item needs it to fill its container.
      */
     fit?: boolean;
+    /**
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%` at the XS breakpoint.
+     */
+    fitXs?: boolean;
+    /**
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%` at the SM breakpoint.
+     */
+    fitSm?: boolean;
+    /**
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%` at the MD breakpoint.
+     */
+    fitMd?: boolean;
+    /**
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%` at the LG breakpoint.
+     */
+    fitLg?: boolean;
+    /**
+     * If `true`, sets the box `width`, `min-width` and `max-width` to `100%` at the XL breakpoint.
+     */
+    fitXl?: boolean;
     /**
      * Defines the spacing between the box items.
      * @defaultValue none
     */
-    gap?: BoxTShirtSizeType;
+    gap?: BoxSpacingType;
     /**
-     * Defines how a box will grow or shrink to fit the space available in its container.
+     * 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 or a custom flex value (e.g., '1', '0 1 auto'). The predefined values are
+     * `none` (`flex: 0 0 auto`), `grow` (`flex: 1 1 auto`) and `shrink` (`flex: 0 1 auto`).
+     * Without it, a box grows to share its row with its siblings (`flex-grow: 1; flex-basis: 0`).
      */
-    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. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStart?: BoxMarginType;
+    /**
+     * Defines the box's outer top spacing at the XS breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStartXs?: BoxMarginType;
+    /**
+     * Defines the box's outer top spacing at the SM breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStartSm?: BoxMarginType;
+    /**
+     * Defines the box's outer top spacing at the MD breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStartMd?: BoxMarginType;
+    /**
+     * Defines the box's outer top spacing at the LG breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStartLg?: BoxMarginType;
+    /**
+     * Defines the box's outer top spacing at the XL breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockStartXl?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStart?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing at the XS breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStartXs?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing at the SM breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStartSm?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing at the MD breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStartMd?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing at the LG breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStartLg?: BoxMarginType;
+    /**
+     * Defines the box's outer left spacing at the XL breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineStartXl?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEnd?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing at the XS breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEndXs?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing at the SM breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEndSm?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing at the MD breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEndMd?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing at the LG breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEndLg?: BoxMarginType;
+    /**
+     * Defines the box's outer right spacing at the XL breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginInlineEndXl?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEnd?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing at the XS breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEndXs?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing at the SM breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEndSm?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing at the MD breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEndMd?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing at the LG breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEndLg?: BoxMarginType;
+    /**
+     * Defines the box's outer bottom spacing at the XL breakpoint. Accepts a spacing token or `auto`.
+     * @defaultValue none
+    */
+    marginBlockEndXl?: BoxMarginType;
     /**
      * The minimum height of the row. Used in conjunction with alignment props
      */
@@ -91,34 +425,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;