API and Development
SizeHold from @prepared911/ui/size-hold.
Required boolean. true keeps the box at the inline and block size it last had; false releases it. The size is read from the box before it is held, not after, so content removed in the same commit does not change it.
Every Box prop for the rendered tag: as, children, className, ref, the layout and paint enums, aria-* and data-*. style is not accepted, as on Box.
--ds-held-inline-size and --ds-held-block-size (RuntimeCssVar.HeldInlineSize and HeldBlockSize), registered as <length> | auto. They are written on the box while it is held and removed when it is released. The held class reads them as inline-size and block-size.
SizeHold, SizeHoldProps, SizeHoldOwnProps, SizeHoldElement.
| Name | Type | Default | Description |
|---|---|---|---|
held | boolean | — | Keeps the box at the inline and block size it had when this turned true, whatever its content does next, until this turns false or the box unmounts. Turning it true on a box that was never measured, or that has no size, holds nothing. |
alignItems | AlignItems | — | Cross-axis alignment when the display is flex or grid. |
aria-description | LocalizedMessage | — | Extended description for assistive tech. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-placeholder | LocalizedMessage | — | Hint for an empty control. |
as | "form" | "search" | "address" | "article" | "aside" | "blockquote" | "dd" | "div" | "dl" | "dt" | "fieldset" | "figcaption" | "figure" | "footer" | "header" | "hgroup" | "li" | "main" | ... 6 more ... | — | Element to render. Defaults to div. |
attachBlockEnd | boolean | — | Pins the block-end edge. Replaces ui-core attachBottom. |
attachBlockStart | boolean | — | Pins the block-start edge. Replaces ui-core attachTop. |
attachInlineEnd | boolean | — | Pins the inline-end edge. Replaces ui-core attachRight. |
attachInlineStart | boolean | — | Pins the inline-start edge. Replaces ui-core attachLeft. |
background | Background | — | Fill from a background token. |
basis | FlexBasis | — | Initial main size. Maps to flex-basis. |
border | BorderColor | — | Border on every side. |
borderBlockEnd | BorderColor | — | Border on the block-end side. Replaces ui-core borderBottom. |
borderBlockStart | BorderColor | — | Border on the block-start side. Replaces ui-core borderTop. |
borderInlineEnd | BorderColor | — | Border on the inline-end side. Replaces ui-core borderRight. |
borderInlineStart | BorderColor | — | Border on the inline-start side. Replaces ui-core borderLeft. |
borderRadius | Radius | — | Corner radius token. |
borderWidth | BorderWidth | — | Border thickness for whichever sides are on. |
children | ReactNode | — | Content rendered inside the element. |
className | string | — | Classes for styles Box props do not cover, such as :hover and other interaction states.
Appended after the generated classes. Put the rules in @layer chroma.overrides so they win over any Box prop for the same property, and reference only allowlisted tokens. |
containerType | ContainerType | — | CSS container-type. |
display | Display | — | CSS display. |
elevation | Elevation | — | Shadow token. Does not change the background. |
flexDirection | FlexDirection | — | Flex main axis. |
flexWrap | FlexWrap | — | Flex wrapping. |
gap | Gap | — | Space between children. Maps to gap. |
grow | boolean | — | When true, sets flex-grow: 1. |
height | SizedBlock | — | Block size. Replaces ui-core's free-form height. |
justifyContent | JustifyContent | — | Main-axis alignment when the display is flex or grid. |
loading | boolean | — | Paints this box as its own loading placeholder, sized by its own layout.
The fill matches Skeleton: --color-fill-strong (unchanged from before) is painted at once and opacity pulses 0.6, 1, 0.6 (the range it always had) over 1.8s on
--easing-glide-in-out for 11 cycles, staggered 90ms per sibling, then rests at 0.6. The pulse stops under
reduced motion, increased contrast and forced colors. The box is inert and hidden from assistive tech; set
aria-busy on the region that owns the data. |
margin | Margin | — | Margin from the space scale, including the negative steps. |
maxHeight | MaxBlockSize | — | Maximum block size. |
maxWidth | MaxInlineSize | — | Maximum inline size. |
minHeight | SizedBlock | — | Minimum block size. |
minWidth | SizedInline | — | Minimum inline size. |
overflow | Overflow | — | CSS overflow. |
overflowBlock | Overflow | — | Block-axis overflow when the shorthand is not enough. |
overflowInline | Overflow | — | Inline-axis overflow when the shorthand is not enough. |
padding | Spacing | — | Padding from the space scale, on all sides or per logical side. |
position | Position | — | CSS position. |
ref | Ref<BoxHost<T>> | — | Ref to the rendered element. |
shrink | boolean | — | When true, sets flex-shrink: 1 and min-inline-size: 0 so flex children can shrink below their content width.
When false, sets flex-shrink: 0. Omitted by default. |
state | StateAttributesInput | — | Design-system state attributes. Raw data-* state names are reserved. |
title | LocalizedMessage | — | Native tooltip; accessibility hint, not visible UI title text. |
width | SizedInline | — | Inline size. Replaces ui-core's free-form width. |
zIndex | ZIndex | — | Stacking token. |