@oaknational/oak-components 1.175.0 → 1.176.0

package/dist/types.d.ts

@@ -165,7 +165,7 @@ declare const oakSpaceBetweenTokens: {
     "spacing-80": string;
 };
 type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
-type AdditionalSpacingTypes = "100%" | 0 | "100vh" | "100vw" | "auto" | "fit-content" | "max-content" | "min-content" | "inherit" | "initial" | "unset";
+type AdditionalSpacingTypes = "100%" | "-50%" | "50%" | 0 | "100vh" | "100vw" | "auto" | "fit-content" | "max-content" | "min-content" | "inherit" | "initial" | "unset";
 type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
 
 type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
@@ -316,7 +316,7 @@ type ColorStyleProps = {
     $background?: ColorToken;
 };
 
-type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | null | undefined;
+type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | "-50%" | "50%" | null | undefined;
 type PositionStyleProps = {
     /**
      * Sets the `position` CSS property of the element.
@@ -327,31 +327,40 @@ type PositionStyleProps = {
     /**
      * Sets the `top` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $top?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `right` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $right?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `bottom` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $bottom?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `left` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $left?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `inset` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $inset?: ResponsiveValues<PositionSpacing>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "1.175.0",
+  "version": "1.176.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",