@utilitywarehouse/hearth-react 0.31.9 → 0.32.1

package/public/llms/components/text-input.md

@@ -1,6 +1,9 @@
 # TextInput
 
-`TextInput` is an interactive field that allows users to enter text and data.
+Use TextInput for a single-line text or data entry field. For passwords,
+search, currency, one-time passcodes, or dates, use PasswordInput,
+SearchInput, CurrencyInput, VerificationInput, or DateInput instead. A
+`label` is required and should be clear and descriptive to guide the user.
 
 ```tsx
 <TextInput {...args} />
@@ -205,17 +208,17 @@ This component is based on the `input` element and supports the following common
 
 - Margin
 
-| Prop               | Type                                                                        | Default | Description                                                                 |
-| ------------------ | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `label`            | `string`                                                                    | —       | The label for the form field, describing its purpose.                       |
-| `defaultValue`     | `string \| number`                                                          | —       | The initial value of the input when rendered.                               |
-| `type`             | `"number" \| "search" \| "text" \| "email" \| "password" \| "tel" \| "url"` | —       |                                                                             |
-| `value`            | `string \| number`                                                          | —       | The controlled value of the input. Must be used with an `onChange` handler. |
-| `labelId`          | `string`                                                                    | —       |                                                                             |
-| `helperTextId`     | `string`                                                                    | —       |                                                                             |
-| `validationTextId` | `string`                                                                    | —       |                                                                             |
-| `hideLabel`        | `boolean`                                                                   | —       | Visually hide the label.                                                    |
-| `labelVariant`     | `"body" \| "heading"`                                                       | —       | Change the label variant                                                    |
-| `helperText`       | `string`                                                                    | —       | Optional helper text to provide additional context or instructions.         |
-| `validationText`   | `string`                                                                    | —       | Text to display when the `validationStatus` is set.                         |
-| `validationStatus` | `"valid" \| "invalid"`                                                      | —       | Indicates the validation status.                                            |
+| Prop               | Type                                                                        | Default | Description                                                                                                              |
+| ------------------ | --------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `label`            | `string`                                                                    | —       | The label for the form field, describing its purpose.                                                                    |
+| `defaultValue`     | `string \| number`                                                          | —       | The initial value of the input when rendered.                                                                            |
+| `type`             | `"number" \| "search" \| "text" \| "email" \| "password" \| "tel" \| "url"` | `text`  | Sets the input's HTML `type` attribute, which determines the keyboard and validation behavior the browser applies to it. |
+| `value`            | `string \| number`                                                          | —       | The controlled value of the input. Must be used with an `onChange` handler.                                              |
+| `labelId`          | `string`                                                                    | —       | The `id` of the element rendering the field's label, for `aria-labelledby` association.                                  |
+| `helperTextId`     | `string`                                                                    | —       | The `id` of the element rendering the field's helper text, for `aria-describedby` association.                           |
+| `validationTextId` | `string`                                                                    | —       | The `id` of the element rendering the field's validation text, for `aria-describedby` association.                       |
+| `hideLabel`        | `boolean`                                                                   | —       | Visually hide the label.                                                                                                 |
+| `labelVariant`     | `"body" \| "heading"`                                                       | —       | Change the label variant                                                                                                 |
+| `helperText`       | `string`                                                                    | —       | Optional helper text to provide additional context or instructions.                                                      |
+| `validationText`   | `string`                                                                    | —       | Text to display when the `validationStatus` is set.                                                                      |
+| `validationStatus` | `"valid" \| "invalid"`                                                      | —       | Indicates the validation status.                                                                                         |

package/public/llms/components/toast.md

@@ -1,6 +1,9 @@
 # Toast
 
-A `Toast` is a brief, non-intrusive message that appears temporarily to provide feedback on an action or notify users of important information. Toasts automatically dismiss after a set duration or can be dismissed manually.
+Use Toast for a brief, non-intrusive message that provides feedback on an
+action or notifies users of important information, auto-dismissing after a
+set duration. It must be rendered inside a ToastProvider. For messages that
+require the user to make a decision, use Alert instead.
 
 - [Usage](#usage)
 - [Icon](#icon)
@@ -282,8 +285,8 @@ This component is based on [Radix UI's Toast primitive](https://www.radix-ui.com
 
 | Prop                 | Type                          | Default | Description                                                                                                                                                                                       |
 | -------------------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `viewportLabel`      | `string`                      | —       |                                                                                                                                                                                                   |
-| `viewportHotkey`     | `string[]`                    | —       |                                                                                                                                                                                                   |
+| `viewportLabel`      | `string`                      | —       | Accessible label for the toast viewport region, announced to assistive technology.                                                                                                                |
+| `viewportHotkey`     | `string[]`                    | —       | Keyboard shortcut that moves focus to the toast viewport, e.g. `['F8']`.                                                                                                                          |
 | `label`              | `string`                      | —       | An author-localized label for each toast. Used to help screen reader users associate the interruption with a toast. @defaultValue 'Notification'                                                  |
 | `duration`           | `number`                      | `5000`  | Time in milliseconds that each toast should remain visible for. @defaultValue 5000                                                                                                                |
 | `announcerContainer` | `Element \| DocumentFragment` | —       | An optional container where the toast announcements should be appended. This is useful when working with focus traps or modal dialogs that make other elements inert. @defaultValue document.body |
@@ -306,9 +309,9 @@ This component is based on [Radix UI's Toast primitive](https://www.radix-ui.com
 | `onSwipeEnd`        | `((event: SwipeEvent) => void)`    | —       |                                                                                                      |
 | `defaultOpen`       | `boolean`                          | —       |                                                                                                      |
 | `onOpenChange`      | `((open: boolean) => void)`        | —       |                                                                                                      |
-| `description`       | `ReactNode`                        | —       |                                                                                                      |
-| `icon`              | `ReactNode`                        | —       |                                                                                                      |
-| `showDismissButton` | `boolean`                          | —       |                                                                                                      |
+| `description`       | `ReactNode`                        | —       | The content of the Toast message.                                                                    |
+| `icon`              | `ReactNode`                        | —       | An optional icon rendered before the description, such as a status icon.                             |
+| `showDismissButton` | `boolean`                          | —       | Shows a dismiss button that lets users manually close the Toast.                                     |
 
 ### ToastActionLink
 
@@ -316,7 +319,7 @@ This component is based on the `a` element and [Radix UI's Toast primitive](http
 
 | Prop      | Type      | Default | Description                                                                                                                                                                                                                                                                                                     |
 | --------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `asChild` | `boolean` | —       |                                                                                                                                                                                                                                                                                                                 |
+| `asChild` | `boolean` | —       | Merges the link's props onto its child element instead of rendering its own `a` element, so the child determines the rendered tag.                                                                                                                                                                              |
 | `altText` | `string`  | —       | A short description for an alternate way to carry out the action. For screen reader users who will not be able to navigate to the button easily/quickly. @example <ToastAction altText="Goto account settings to upgrade">Upgrade</ToastAction> @example <ToastAction altText="Undo (Alt+U)">Undo</ToastAction> |
 
 ### ToastActionButton

package/public/llms/components/toggle-button.md

@@ -1,9 +1,10 @@
 # ToggleButton
 
-A standalone toggle button for use with `ToggleGroup`. Unlike
-`ToggleButtonCard`, `ToggleButton` is just the button itself - it has no card
-wrapper - making it suitable for layouts where the toggle controls live inside
-a custom container such as a comparison table.
+Use ToggleButton as a standalone toggle option within a ToggleGroup, when
+you need just the button itself without a card wrapper, for example
+inside a custom layout like a comparison table. For a toggle presented as
+a selectable card, use ToggleButtonCard instead. Must be used within a
+ToggleGroup, and requires a unique `value` prop.
 
 ```tsx
 <ToggleGroup type="single" gap="200">

package/public/llms/components/tooltip.md

@@ -1,8 +1,9 @@
 # Tooltip
 
-Use `Tooltip` to temporarily display short, contextual text, that
-is not critical information, related to an element when
-the element receives keyboard focus or the mouse hovers over it.
+Use Tooltip to temporarily display short, non-critical contextual text
+related to an element when it receives keyboard focus or is hovered. It
+requires a single child element as its trigger, and must be used within a
+TooltipProvider (or the global HearthProvider).
 
 - [Setup](#setup)
 - [Usage](#usage)
@@ -174,9 +175,9 @@ Adheres to the [WAI-ARIA Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/toolt
 
 | Prop                     | Type                                                                                                                         | Default     | Description                                                                                                           |
 | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
-| `align`                  | `"rightCenter" \| "leftCenter" \| "bottomLeft" \| "bottomCenter" \| "bottomRight" \| "topLeft" \| "topCenter" \| "topRight"` | `topCenter` |                                                                                                                       |
+| `align`                  | `"rightCenter" \| "leftCenter" \| "bottomLeft" \| "bottomCenter" \| "bottomRight" \| "topLeft" \| "topCenter" \| "topRight"` | `topCenter` | Sets the position of the tooltip relative to its trigger.                                                             |
 | `aria-label`             | `string`                                                                                                                     | —           | A more descriptive label for accessibility purpose                                                                    |
-| `heading`                | `string`                                                                                                                     | —           |                                                                                                                       |
+| `heading`                | `string`                                                                                                                     | —           | An optional heading shown above the description for more structured tooltip content.                                  |
 | `hideWhenDetached`       | `boolean`                                                                                                                    | —           |                                                                                                                       |
 | `updatePositionStrategy` | `"optimized" \| "always"`                                                                                                    | —           |                                                                                                                       |
 | `forceMount`             | `true`                                                                                                                       | —           | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
@@ -185,4 +186,4 @@ Adheres to the [WAI-ARIA Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/toolt
 | `open`                   | `boolean`                                                                                                                    | —           |                                                                                                                       |
 | `defaultOpen`            | `boolean`                                                                                                                    | —           |                                                                                                                       |
 | `onOpenChange`           | `((open: boolean) => void)`                                                                                                  | —           |                                                                                                                       |
-| `description`            | `ReactNode`                                                                                                                  | —           |                                                                                                                       |
+| `description`            | `ReactNode`                                                                                                                  | —           | The content of the tooltip.                                                                                           |

package/public/llms/components/unstyled-icon-button.md

@@ -1,5 +1,10 @@
 # UnstyledIconButton
 
+Use UnstyledIconButton for an icon-only button with no visual styling of
+its own: a plain, unstyled base for building custom icon button variants.
+For a fully-styled icon button, use IconButton instead. A `label` is
+required, since the button contains only an icon with no visible text.
+
 - [Icons](#icons)
 - [Accessibility](#accessibility)
   - [Disabled buttons](#disabled-buttons)
@@ -166,10 +171,10 @@ This component is based on the `button` element and supports the following commo
 
 - Margin
 
-| Prop       | Type                       | Default | Description                                                                                          |
-| ---------- | -------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `label`    | `string`                   | —       |                                                                                                      |
-| `loading`  | `boolean`                  | —       | Indicate when the button is in a loading state, will also disable the button.                        |
-| `asChild`  | `boolean`                  | —       | Change the default rendered element for the one passed as a child, merging their props and behavior. |
-| `size`     | `Responsive<"sm" \| "md">` | `md`    | Sets the button height.                                                                              |
-| `inverted` | `boolean`                  | —       | Inverts the component colours, for use on darker surface colours.                                    |
+| Prop       | Type                       | Default | Description                                                                                                                                   |
+| ---------- | -------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`    | `string`                   | —       | An accessible label for the button, announced to screen readers. Required since the button contains only an icon and no visible text content. |
+| `loading`  | `boolean`                  | —       | Indicate when the button is in a loading state, will also disable the button.                                                                 |
+| `asChild`  | `boolean`                  | —       | Change the default rendered element for the one passed as a child, merging their props and behavior.                                          |
+| `size`     | `Responsive<"sm" \| "md">` | `md`    | Sets the button height.                                                                                                                       |
+| `inverted` | `boolean`                  | —       | Inverts the component colours, for use on darker surface colours.                                                                             |

package/public/llms/components/validation-text.md

@@ -1,6 +1,8 @@
 # ValidationText
 
-`ValidationText` should be used with form field components to display validation messages.
+Use ValidationText alongside a form field to display a validation message,
+with an icon and colour that reflect the `status` (`valid` or `invalid`).
+For general, non-validation guidance about a field, use HelperText instead.
 
 ```tsx
 <ValidationText status="valid">Hearth validation text</ValidationText>

package/public/llms/components/verification-input.md

@@ -1,7 +1,8 @@
 # VerificationInput
 
-`VerificationInput` allows users to enter a one-time password (OTP) sent via
-SMS, email, or authenticator apps.
+Use VerificationInput to let users enter a one-time password (OTP) sent via
+SMS, email, or an authenticator app. For general text entry, use TextInput;
+for passwords, use PasswordInput instead. A `label` is required.
 
 ```tsx
 <VerificationInput label="Label" helperText="Helper text" validationText="Validation text" />
@@ -79,10 +80,10 @@ This component is based on the `input` element and supports the following common
 | `type`             | `"text" \| "password"`                             | —       | The input type of the field's input elements. Can be `"password"` or `"text"`.                                                                                                                                                                                                                                                                                              |
 | `validationType`   | `"none" \| "numeric" \| "alpha" \| "alphanumeric"` | —       | Specifies the type of input validation to be used. Can be `"alpha"`, `"numeric"`, `"alphanumeric"` or `"none"`. @defaultValue `"numeric"`                                                                                                                                                                                                                                   |
 | `value`            | `string`                                           | —       | The controlled value of the field.                                                                                                                                                                                                                                                                                                                                          |
-| `labelId`          | `string`                                           | —       |                                                                                                                                                                                                                                                                                                                                                                             |
-| `helperTextId`     | `string`                                           | —       |                                                                                                                                                                                                                                                                                                                                                                             |
-| `validationTextId` | `string`                                           | —       |                                                                                                                                                                                                                                                                                                                                                                             |
-| `required`         | `boolean`                                          | —       |                                                                                                                                                                                                                                                                                                                                                                             |
+| `labelId`          | `string`                                           | —       | The `id` of the element rendering the field's label, for `aria-labelledby` association.                                                                                                                                                                                                                                                                                     |
+| `helperTextId`     | `string`                                           | —       | The `id` of the element rendering the field's helper text, for `aria-describedby` association.                                                                                                                                                                                                                                                                              |
+| `validationTextId` | `string`                                           | —       | The `id` of the element rendering the field's validation text, for `aria-describedby` association.                                                                                                                                                                                                                                                                          |
+| `required`         | `boolean`                                          | —       | Marks the field as required.                                                                                                                                                                                                                                                                                                                                                |
 | `labelVariant`     | `"body" \| "heading"`                              | —       | Change the label variant                                                                                                                                                                                                                                                                                                                                                    |
 | `helperText`       | `string`                                           | —       | Optional helper text to provide additional context or instructions.                                                                                                                                                                                                                                                                                                         |
 | `validationText`   | `string`                                           | —       | Text to display when the `validationStatus` is set.                                                                                                                                                                                                                                                                                                                         |

package/public/llms/docs/common-props/align-self.md

@@ -10,6 +10,6 @@ The align-self CSS property overrides a grid or flex item's align-items value.
 </Flex>
 ```
 
-| Prop        | Type                                                    | Default | Description |
-| ----------- | ------------------------------------------------------- | ------- | ----------- |
-| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | —       |             |
+| Prop        | Type                                                    | Default | Description                                                                                                                                       |
+| ----------- | ------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | —       | Override the container's `align-items` value for this individual flex or grid item, aligning it along the cross axis. Supports responsive values. |

package/public/llms/docs/common-props/border.md

@@ -43,13 +43,13 @@ import { Box } from '@utilitywarehouse/hearth-react' import { semantic } from '@
 // <Box borderColor='rebeccapurple'/>
 ```
 
-| Prop                | Type                                           | Default | Description |
-| ------------------- | ---------------------------------------------- | ------- | ----------- |
-| `borderColor`       | `"strong" \| `var(--h-${string})` \| "subtle"` | —       |             |
-| `borderTopColor`    | `"strong" \| `var(--h-${string})` \| "subtle"` | —       |             |
-| `borderRightColor`  | `"strong" \| `var(--h-${string})` \| "subtle"` | —       |             |
-| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | —       |             |
-| `borderLeftColor`   | `"strong" \| `var(--h-${string})` \| "subtle"` | —       |             |
+| Prop                | Type                                           | Default | Description                                                       |
+| ------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `borderColor`       | `"strong" \| `var(--h-${string})` \| "subtle"` | —       | Sets the `border-color` CSS property on all sides of the element. |
+| `borderTopColor`    | `"strong" \| `var(--h-${string})` \| "subtle"` | —       | Sets the `border-top-color` CSS property.                         |
+| `borderRightColor`  | `"strong" \| `var(--h-${string})` \| "subtle"` | —       | Sets the `border-right-color` CSS property.                       |
+| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | —       | Sets the `border-bottom-color` CSS property.                      |
+| `borderLeftColor`   | `"strong" \| `var(--h-${string})` \| "subtle"` | —       | Sets the `border-left-color` CSS property.                        |
 
 ## Border width and style
 
@@ -74,18 +74,18 @@ import { components } from '@utilitywarehouse/hearth-tokens/browser';
 <Box borderWidth={components.alert.borderWidth} />
 ```
 
-| Prop                | Type                                                    | Default | Description |
-| ------------------- | ------------------------------------------------------- | ------- | ----------- |
-| `borderStyle`       | `Responsive<"none" \| "solid">`                         | —       |             |
-| `borderTopStyle`    | `Responsive<"none" \| "solid">`                         | —       |             |
-| `borderRightStyle`  | `Responsive<"none" \| "solid">`                         | —       |             |
-| `borderBottomStyle` | `Responsive<"none" \| "solid">`                         | —       |             |
-| `borderLeftStyle`   | `Responsive<"none" \| "solid">`                         | —       |             |
-| `borderWidth`       | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       |             |
-| `borderTopWidth`    | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       |             |
-| `borderRightWidth`  | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       |             |
-| `borderBottomWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       |             |
-| `borderLeftWidth`   | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       |             |
+| Prop                | Type                                                    | Default | Description                                                                  |
+| ------------------- | ------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `borderStyle`       | `Responsive<"none" \| "solid">`                         | —       | Sets the responsive `border-style` CSS property on all sides of the element. |
+| `borderTopStyle`    | `Responsive<"none" \| "solid">`                         | —       | Sets the responsive `border-top-style` CSS property.                         |
+| `borderRightStyle`  | `Responsive<"none" \| "solid">`                         | —       | Sets the responsive `border-right-style` CSS property.                       |
+| `borderBottomStyle` | `Responsive<"none" \| "solid">`                         | —       | Sets the responsive `border-bottom-style` CSS property.                      |
+| `borderLeftStyle`   | `Responsive<"none" \| "solid">`                         | —       | Sets the responsive `border-left-style` CSS property.                        |
+| `borderWidth`       | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       | Sets the responsive `border-width` CSS property on all sides of the element. |
+| `borderTopWidth`    | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       | Sets the responsive `border-top-width` CSS property.                         |
+| `borderRightWidth`  | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       | Sets the responsive `border-right-width` CSS property.                       |
+| `borderBottomWidth` | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       | Sets the responsive `border-bottom-width` CSS property.                      |
+| `borderLeftWidth`   | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">` | —       | Sets the responsive `border-left-width` CSS property.                        |
 
 ## Border radius
 
@@ -101,14 +101,14 @@ You can also override the `borderRadius` for individual corners and sides.
 <Box borderRadius="lg" borderRadiusTopLeftNone borderRadiusBottomRightNone  />
 ```
 
-| Prop                          | Type                                                                                | Default | Description |
-| ----------------------------- | ----------------------------------------------------------------------------------- | ------- | ----------- |
-| `borderRadius`                | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | —       |             |
-| `borderRadiusTopLeftNone`     | `boolean`                                                                           | —       |             |
-| `borderRadiusTopRightNone`    | `boolean`                                                                           | —       |             |
-| `borderRadiusBottomLeftNone`  | `boolean`                                                                           | —       |             |
-| `borderRadiusBottomRightNone` | `boolean`                                                                           | —       |             |
-| `borderRadiusTopNone`         | `boolean`                                                                           | —       |             |
-| `borderRadiusRightNone`       | `boolean`                                                                           | —       |             |
-| `borderRadiusBottomNone`      | `boolean`                                                                           | —       |             |
-| `borderRadiusLeftNone`        | `boolean`                                                                           | —       |             |
+| Prop                          | Type                                                                                | Default | Description                                                                     |
+| ----------------------------- | ----------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `borderRadius`                | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | —       | Sets the responsive `border-radius` CSS property on all corners of the element. |
+| `borderRadiusTopLeftNone`     | `boolean`                                                                           | —       | Removes the border radius from the top-left corner.                             |
+| `borderRadiusTopRightNone`    | `boolean`                                                                           | —       | Removes the border radius from the top-right corner.                            |
+| `borderRadiusBottomLeftNone`  | `boolean`                                                                           | —       | Removes the border radius from the bottom-left corner.                          |
+| `borderRadiusBottomRightNone` | `boolean`                                                                           | —       | Removes the border radius from the bottom-right corner.                         |
+| `borderRadiusTopNone`         | `boolean`                                                                           | —       | Removes the border radius from the top-left and top-right corners.              |
+| `borderRadiusRightNone`       | `boolean`                                                                           | —       | Removes the border radius from the top-right and bottom-right corners.          |
+| `borderRadiusBottomNone`      | `boolean`                                                                           | —       | Removes the border radius from the bottom-left and bottom-right corners.        |
+| `borderRadiusLeftNone`        | `boolean`                                                                           | —       | Removes the border radius from the top-left and bottom-left corners.            |

package/public/llms/docs/common-props/colour.md

@@ -41,9 +41,9 @@ import { Box } from '@utilitywarehouse/hearth-react' import { semantic } from '@
 // <Box color='rebeccapurple'/>
 ```
 
-| Prop    | Type                                                                                         | Default | Description |
-| ------- | -------------------------------------------------------------------------------------------- | ------- | ----------- |
-| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | —       |             |
+| Prop    | Type                                                                                         | Default | Description                         |
+| ------- | -------------------------------------------------------------------------------------------- | ------- | ----------------------------------- |
+| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | —       | Sets the text `color` CSS property. |
 
 ## Background colour
 
@@ -80,6 +80,6 @@ import { Box } from '@utilitywarehouse/hearth-react' import { semantic } from '@
 // <Box backgroundColor='rebeccapurple'/>
 ```
 
-| Prop              | Type                                                          | Default | Description |
-| ----------------- | ------------------------------------------------------------- | ------- | ----------- |
-| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | —       |             |
+| Prop              | Type                                                          | Default | Description                               |
+| ----------------- | ------------------------------------------------------------- | ------- | ----------------------------------------- |
+| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | —       | Sets the `background-color` CSS property. |

package/public/llms/docs/common-props/flex-items.md

@@ -11,9 +11,9 @@ Flex item props enable styling on components when they are children of a flexbox
 </Flex>
 ```
 
-| Prop         | Type                 | Default | Description |
-| ------------ | -------------------- | ------- | ----------- |
-| `flex`       | `Responsive<string>` | —       |             |
-| `flexBasis`  | `Responsive<string>` | —       |             |
-| `flexShrink` | `Responsive<string>` | —       |             |
-| `flexGrow`   | `Responsive<string>` | —       |             |
+| Prop         | Type                 | Default | Description                                                                                                                                               |
+| ------------ | -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `flex`       | `Responsive<string>` | —       | Shorthand for `flex-grow`, `flex-shrink` and `flex-basis`, controlling how a flex item grows or shrinks to fit the space available in its flex container. |
+| `flexBasis`  | `Responsive<string>` | —       | Set the initial main-size of a flex item before remaining space is distributed along the main axis.                                                       |
+| `flexShrink` | `Responsive<string>` | `1`     | Set how much a flex item shrinks relative to the rest of the flex items when there isn't enough space in the container.                                   |
+| `flexGrow`   | `Responsive<string>` | `0`     | Set how much a flex item grows relative to the rest of the flex items when there is extra space in the container.                                         |

package/public/llms/docs/common-props/gap.md

@@ -22,8 +22,8 @@ import { Flex } from '@utilitywarehouse/hearth-react' import { components } from
 // <Box gap={{ mobile: '100', tablet: 'var(--h-space-200)', desktop: '32px' }}/>
 ```
 
-| Prop        | Type                                                                                                                                                                                             | Default | Description |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | ----------- |
-| `gap`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `rowGap`    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| Prop        | Type                                                                                                                                                                                             | Default | Description                                                                                                                                   |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gap`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Shorthand for `row-gap` and `column-gap`, setting the space between rows and columns in a flex or grid container. Supports responsive values. |
+| `rowGap`    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Set the space between rows in a flex or grid container. Supports responsive values.                                                           |
+| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Set the space between columns in a flex or grid container. Supports responsive values.                                                        |

package/public/llms/docs/common-props/grid-items.md

@@ -16,13 +16,13 @@ for the relevant prop.
 </Grid>
 ```
 
-| Prop              | Type                                                                                                             | Default | Description |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
-| `gridColumnSpan`  | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | —       |             |
-| `gridArea`        | `Responsive<string>`                                                                                             | —       |             |
-| `gridColumn`      | `Responsive<string>`                                                                                             | —       |             |
-| `gridColumnStart` | `Responsive<string>`                                                                                             | —       |             |
-| `gridColumnEnd`   | `Responsive<string>`                                                                                             | —       |             |
-| `gridRow`         | `Responsive<string>`                                                                                             | —       |             |
-| `gridRowStart`    | `Responsive<string>`                                                                                             | —       |             |
-| `gridRowEnd`      | `Responsive<string>`                                                                                             | —       |             |
+| Prop              | Type                                                                                                             | Default | Description                                                                                                                                             |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gridColumnSpan`  | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | —       | Set the number of grid columns this item spans. Supports responsive values.                                                                             |
+| `gridArea`        | `Responsive<string>`                                                                                             | —       | Shorthand for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, placing an item within a named grid area or by line numbers. |
+| `gridColumn`      | `Responsive<string>`                                                                                             | —       | Shorthand for `grid-column-start` and `grid-column-end`, setting an item's size and location within the grid column.                                    |
+| `gridColumnStart` | `Responsive<string>`                                                                                             | —       | Set an item's starting line within the grid column.                                                                                                     |
+| `gridColumnEnd`   | `Responsive<string>`                                                                                             | —       | Set an item's ending line within the grid column.                                                                                                       |
+| `gridRow`         | `Responsive<string>`                                                                                             | —       | Shorthand for `grid-row-start` and `grid-row-end`, setting an item's size and location within the grid row.                                             |
+| `gridRowStart`    | `Responsive<string>`                                                                                             | —       | Set an item's starting line within the grid row.                                                                                                        |
+| `gridRowEnd`      | `Responsive<string>`                                                                                             | —       | Set an item's ending line within the grid row.                                                                                                          |

package/public/llms/docs/common-props/margin.md

@@ -25,12 +25,12 @@ import { Box } from '@utilitywarehouse/hearth-react' import { components } from
 // <Box margin={{ mobile: '100', tablet: 'var(--h-space-200)', desktop: '32px' }}/>
 ```
 
-| Prop           | Type                                                                                                                                                                                                       | Default | Description |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
-| `margin`       | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginTop`    | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginRight`  | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginLeft`   | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginX`      | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `marginY`      | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| Prop           | Type                                                                                                                                                                                                       | Default | Description                                                            |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------- |
+| `margin`       | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin` CSS property on all sides of the element. |
+| `marginTop`    | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-top` CSS property.                         |
+| `marginRight`  | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-right` CSS property.                       |
+| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-bottom` CSS property.                      |
+| `marginLeft`   | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-left` CSS property.                        |
+| `marginX`      | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-left` and `margin-right` CSS properties.   |
+| `marginY`      | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `margin-top` and `margin-bottom` CSS properties.   |

package/public/llms/docs/common-props/opacity.md

@@ -20,6 +20,6 @@ import {semantic} from '@utilitywarehouse/hearth-tokens/browser';
 <Grid opacity="var(--h-opacity-disabled)" />
 ```
 
-| Prop      | Type                 | Default | Description |
-| --------- | -------------------- | ------- | ----------- |
-| `opacity` | `Responsive<string>` | —       |             |
+| Prop      | Type                 | Default | Description                                                                                                         |
+| --------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| `opacity` | `Responsive<string>` | —       | Set the transparency of an element, from `0` (fully transparent) to `1` (fully opaque). Supports responsive values. |

package/public/llms/docs/common-props/overflow.md

@@ -9,8 +9,8 @@ The overflow props are responsive, and are available for the shorthand as well a
 <Box overflowY="auto" />
 ```
 
-| Prop        | Type                                                                | Default | Description |
-| ----------- | ------------------------------------------------------------------- | ------- | ----------- |
-| `overflow`  | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | —       |             |
-| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | —       |             |
-| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | —       |             |
+| Prop        | Type                                                                | Default     | Description                                                                           |
+| ----------- | ------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
+| `overflow`  | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | `'visible'` | Set how content that overflows the component's box is handled, on both axes.          |
+| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | `'visible'` | Set how content that overflows the component's box is handled on the horizontal axis. |
+| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | `'visible'` | Set how content that overflows the component's box is handled on the vertical axis.   |

package/public/llms/docs/common-props/padding.md

@@ -22,12 +22,12 @@ import { Box } from '@utilitywarehouse/hearth-react' import { components } from
 // <Box paddingBottom={{ mobile: '100', tablet: 'var(--h-space-200)', desktop: '32px' }}/>
 ```
 
-| Prop            | Type                                                                                                                                                                                             | Default | Description |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | ----------- |
-| `padding`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingTop`    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingRight`  | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingLeft`   | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingX`      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
-| `paddingY`      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| Prop            | Type                                                                                                                                                                                             | Default | Description                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------- |
+| `padding`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding` CSS property on all sides of the element. |
+| `paddingTop`    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-top` CSS property.                         |
+| `paddingRight`  | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-right` CSS property.                       |
+| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-bottom` CSS property.                      |
+| `paddingLeft`   | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-left` CSS property.                        |
+| `paddingX`      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-left` and `padding-right` CSS properties.  |
+| `paddingY`      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       | Sets the responsive `padding-top` and `padding-bottom` CSS properties.  |

package/public/llms/docs/common-props/position.md

@@ -12,11 +12,11 @@ as well as raw string values.
 <Box position="absolute" bottom={{mobile: '25%', desktop: '200'}}/>
 ```
 
-| Prop       | Type                                                                                                                                                                                    | Default | Description |
-| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
-| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                               | —       |             |
-| `inset`    | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —       |             |
-| `top`      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —       |             |
-| `right`    | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —       |             |
-| `bottom`   | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —       |             |
-| `left`     | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —       |             |
+| Prop       | Type                                                                                                                                                                                    | Default    | Description                                                                                                        |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
+| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                               | `'static'` | Set how the component is positioned in the document.                                                               |
+| `inset`    | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —          | Set the distance of all four edges (top, right, bottom, left) of a positioned component from its containing block. |
+| `top`      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —          | Set the distance of the top edge of a positioned component from its containing block.                              |
+| `right`    | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —          | Set the distance of the right edge of a positioned component from its containing block.                            |
+| `bottom`   | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —          | Set the distance of the bottom edge of a positioned component from its containing block.                           |
+| `left`     | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | —          | Set the distance of the left edge of a positioned component from its containing block.                             |