flet-box 1.1.1 → 1.1.3

package/docs/widget/Row.md

@@ -31,7 +31,7 @@ const row = Row({
 | `alignItems` | `ContainerProps['alignItems']` | Aligns children across the cross axis (CSS `align-items`). |
 | `wrap` | `boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'` | Lets children wrap onto multiple lines. |
 | `children` | `Widget[]` | An array of child widgets. Alias: `child` for a single child. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onPress` | `(event?: Event) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
 
 ### Common props
 
@@ -39,11 +39,64 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| `full` | `boolean` | Stretches the widget to fill its parent on both axes in stack mode. |
+| `fullHeight` | `boolean` | Stretches the widget to the full height of its parent in stack mode. |
+| `fullWidth` | `boolean` | Stretches the widget to the full width of its parent. |
+| `center` | `boolean` | Centres the widget on both axes in stack mode. |
+| `centerY` | `boolean` | Centres the widget vertically in stack mode. |
+| `centerX` | `boolean` | Centres the widget horizontally in stack mode. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
+| `z` | `number` | Alias of `zIndex`. |
+| `end` | `Size` | Logical alias of `right`, used by the stack placement shorthands. |
+| `start` | `Size` | Logical alias of `left`, used by the stack placement shorthands. |
+| `inset` | `Size` | Shorthand for the four edge offsets (`top`/`right`/`bottom`/`left`). |
+| `left` | `Size` | Offset from the left edge. A number is pixels; a string uses any CSS unit. |
+| `bottom` | `Size` | Offset from the bottom edge. A number is pixels; a string uses any CSS unit. |
+| `right` | `Size` | Offset from the right edge. A number is pixels; a string uses any CSS unit. |
+| `top` | `Size` | Offset from the top edge. A number is pixels; a string uses any CSS unit. |
+| `pos` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | Alias of `position`. |
+| `position` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
 | `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
+| `borderTop` | `string` | The top edge of the border alone, for a widget whose rim differs per side. |
+| `borderBottom` | `string` | The bottom edge of the border alone, for a widget whose rim differs per side. |
+| `borderLeft` | `string` | The left edge of the border alone, for a widget whose rim differs per side. |
+| `borderRight` | `string` | The right edge of the border alone, for a widget whose rim differs per side. |
+| `cursor` | `string` | CSS `cursor` value: what the pointer becomes over the widget (`pointer`, `grab`, `not-allowed`). |
+| `display` | `string` | CSS `display` value for the container. |
+| `boxSizing` | `'border-box' \| 'content-box'` | Which box `width` and `height` measure: `border-box` keeps the size you asked for and pushes padding inward. |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Main axis of a flex container: `row` places children side by side, `column` stacks them. |
+| `flexGrow` | `number` | Share of the leftover space this child takes, relative to its siblings. |
+| `flexShrink` | `number` | How readily the child gives space back when the row overflows; `0` keeps its size. |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `fontSize` | `number` | Size of the font. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
 | `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `paddingTop` | `Size` | Space inside the widget, on the top edge only. |
+| `paddingRight` | `Size` | Space inside the widget, on the right edge only. |
+| `paddingBottom` | `Size` | Space inside the widget, on the bottom edge only. |
+| `paddingLeft` | `Size` | Space inside the widget, on the left edge only. |
+| `pt` | `Size` | Alias of `paddingTop`. |
+| `pr` | `Size` | Alias of `paddingRight`. |
+| `pb` | `Size` | Alias of `paddingBottom`. |
+| `pl` | `Size` | Alias of `paddingLeft`. |
 | `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `marginTop` | `Size` | Space outside the widget, on the top edge only. |
+| `marginRight` | `Size` | Space outside the widget, on the right edge only. |
+| `marginBottom` | `Size` | Space outside the widget, on the bottom edge only. |
+| `marginLeft` | `Size` | Space outside the widget, on the left edge only. |
+| `mt` | `Size` | Alias of `marginTop`. |
+| `mr` | `Size` | Alias of `marginRight`. |
+| `mb` | `Size` | Alias of `marginBottom`. |
+| `ml` | `Size` | Alias of `marginLeft`. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
@@ -53,11 +106,23 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 | `filter` | `string` | Raw CSS `filter` value applied to the widget itself, e.g. `blur(4px)`. |
 | `backdropFilter` | `string` | Raw CSS `backdrop-filter` value: what sits behind the widget is blurred through it, which is what makes a translucent card frosted glass. |
 | `maskImage` | `string` | Raw CSS `mask-image` value, used to fade a widget out at its edges instead of cutting it. |
+| `bgImage` | `string` | Image painted behind the widget's content (CSS `background-image`), placed with `bgSize` and `bgPosition`. |
+| `bgSize` | `string` | How the background image fills its box (`cover`, `contain`, or a length). |
+| `bgPosition` | `string` | Where the background image is anchored (`center`, `top`, `50% 20%`). |
+| `bgRepeat` | `string` | Whether the background image tiles; `no-repeat` for a single cover. |
 | `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
 | `visible` | `boolean` | Whether the widget is rendered and visible. |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onPress` | `(event?: Event) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(event?: Event) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onclick` | `(event?: Event) => void` | Lowercase alias of `onClick`, kept because the shipped templates and the HTML habit write it. |
+| `alignSelf` | `AlignSelf` | Overrides the parent's `alignItems` for this child alone (CSS `align-self`). Alias: `selfAlign`. |
+| `selfAlign` | `AlignSelf` | Alias of `alignSelf`. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `overflowX` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowX` value for the widget. |
+| `overflowY` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowY` value for the widget. |
+| `textOverflow` | `'clip' \| 'ellipsis' \| string` | The `textOverflow` value for the widget. |
+| `whiteSpace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-wrap' \| 'pre-line' \| string` | The `whiteSpace` value for the widget. |
 | `id` | `string` | DOM `id` for the rendered element. |
 | `className` | `string` | CSS class names applied to the rendered element. |
 | `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |

package/docs/widget/Skeleton.md

@@ -42,11 +42,64 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| `full` | `boolean` | Stretches the widget to fill its parent on both axes in stack mode. |
+| `fullHeight` | `boolean` | Stretches the widget to the full height of its parent in stack mode. |
+| `fullWidth` | `boolean` | Stretches the widget to the full width of its parent. |
+| `center` | `boolean` | Centres the widget on both axes in stack mode. |
+| `centerY` | `boolean` | Centres the widget vertically in stack mode. |
+| `centerX` | `boolean` | Centres the widget horizontally in stack mode. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
+| `z` | `number` | Alias of `zIndex`. |
+| `end` | `Size` | Logical alias of `right`, used by the stack placement shorthands. |
+| `start` | `Size` | Logical alias of `left`, used by the stack placement shorthands. |
+| `inset` | `Size` | Shorthand for the four edge offsets (`top`/`right`/`bottom`/`left`). |
+| `left` | `Size` | Offset from the left edge. A number is pixels; a string uses any CSS unit. |
+| `bottom` | `Size` | Offset from the bottom edge. A number is pixels; a string uses any CSS unit. |
+| `right` | `Size` | Offset from the right edge. A number is pixels; a string uses any CSS unit. |
+| `top` | `Size` | Offset from the top edge. A number is pixels; a string uses any CSS unit. |
+| `pos` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | Alias of `position`. |
+| `position` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
 | `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
+| `borderTop` | `string` | The top edge of the border alone, for a widget whose rim differs per side. |
+| `borderBottom` | `string` | The bottom edge of the border alone, for a widget whose rim differs per side. |
+| `borderLeft` | `string` | The left edge of the border alone, for a widget whose rim differs per side. |
+| `borderRight` | `string` | The right edge of the border alone, for a widget whose rim differs per side. |
+| `cursor` | `string` | CSS `cursor` value: what the pointer becomes over the widget (`pointer`, `grab`, `not-allowed`). |
+| `display` | `string` | CSS `display` value for the container. |
+| `boxSizing` | `'border-box' \| 'content-box'` | Which box `width` and `height` measure: `border-box` keeps the size you asked for and pushes padding inward. |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Main axis of a flex container: `row` places children side by side, `column` stacks them. |
+| `flexGrow` | `number` | Share of the leftover space this child takes, relative to its siblings. |
+| `flexShrink` | `number` | How readily the child gives space back when the row overflows; `0` keeps its size. |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `fontSize` | `number` | Size of the font. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
 | `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `paddingTop` | `Size` | Space inside the widget, on the top edge only. |
+| `paddingRight` | `Size` | Space inside the widget, on the right edge only. |
+| `paddingBottom` | `Size` | Space inside the widget, on the bottom edge only. |
+| `paddingLeft` | `Size` | Space inside the widget, on the left edge only. |
+| `pt` | `Size` | Alias of `paddingTop`. |
+| `pr` | `Size` | Alias of `paddingRight`. |
+| `pb` | `Size` | Alias of `paddingBottom`. |
+| `pl` | `Size` | Alias of `paddingLeft`. |
 | `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `marginTop` | `Size` | Space outside the widget, on the top edge only. |
+| `marginRight` | `Size` | Space outside the widget, on the right edge only. |
+| `marginBottom` | `Size` | Space outside the widget, on the bottom edge only. |
+| `marginLeft` | `Size` | Space outside the widget, on the left edge only. |
+| `mt` | `Size` | Alias of `marginTop`. |
+| `mr` | `Size` | Alias of `marginRight`. |
+| `mb` | `Size` | Alias of `marginBottom`. |
+| `ml` | `Size` | Alias of `marginLeft`. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
@@ -56,11 +109,23 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 | `filter` | `string` | Raw CSS `filter` value applied to the widget itself, e.g. `blur(4px)`. |
 | `backdropFilter` | `string` | Raw CSS `backdrop-filter` value: what sits behind the widget is blurred through it, which is what makes a translucent card frosted glass. |
 | `maskImage` | `string` | Raw CSS `mask-image` value, used to fade a widget out at its edges instead of cutting it. |
+| `bgImage` | `string` | Image painted behind the widget's content (CSS `background-image`), placed with `bgSize` and `bgPosition`. |
+| `bgSize` | `string` | How the background image fills its box (`cover`, `contain`, or a length). |
+| `bgPosition` | `string` | Where the background image is anchored (`center`, `top`, `50% 20%`). |
+| `bgRepeat` | `string` | Whether the background image tiles; `no-repeat` for a single cover. |
 | `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
 | `visible` | `boolean` | Whether the widget is rendered and visible. |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onPress` | `(event?: Event) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(event?: Event) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onclick` | `(event?: Event) => void` | Lowercase alias of `onClick`, kept because the shipped templates and the HTML habit write it. |
+| `alignSelf` | `AlignSelf` | Overrides the parent's `alignItems` for this child alone (CSS `align-self`). Alias: `selfAlign`. |
+| `selfAlign` | `AlignSelf` | Alias of `alignSelf`. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `overflowX` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowX` value for the widget. |
+| `overflowY` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowY` value for the widget. |
+| `textOverflow` | `'clip' \| 'ellipsis' \| string` | The `textOverflow` value for the widget. |
+| `whiteSpace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-wrap' \| 'pre-line' \| string` | The `whiteSpace` value for the widget. |
 | `id` | `string` | DOM `id` for the rendered element. |
 | `className` | `string` | CSS class names applied to the rendered element. |
 | `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
@@ -131,4 +196,4 @@ const cardPlaceholder = Skeleton({
 - **Next:** [FloatingActionButton](FloatingActionButton.md)
 - **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
 
-You are reading **Chapter 4 · Feedback and overlays** (8 of 10).
+You are reading **Chapter 4 · Feedback and overlays** (9 of 11).

package/docs/widget/Slider.md

@@ -31,6 +31,7 @@ const volume = Slider({
 | `height` | `number` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `thumbSize` | `number` | Size of the slider thumb. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
+| `thumbColor` | `Color` | Color used for the thumb. |
 | `trackColor` | `Color` | Color of the slider track. |
 | `orientation` | `'horizontal' \| 'vertical'` | Orientation of the widget or control. |
 | `inverted` | `boolean` | Reverses the direction of the control. |
@@ -43,8 +44,8 @@ const volume = Slider({
 | `animatedStripes` | `boolean` | Animates the stripes on the bar. |
 | `stripeColor` | `string` | Color used for the stripe. |
 | `glow` | `boolean` | Adds a glow around the widget. |
-| `onPress` | `(value: number) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onChanged` | `(value: number) => void` | Event handler for the `onChanged` event. |
+| `onPress` | `(value: number) => void` | Called with the new value while the thumb moves. |
+| `onChanged` | `(value: number) => void` | Deprecated alias of `onPress`. |
 | `onChangeEnd` | `(value: number) => void` | Event handler for the `onChangeEnd` event. |
 
 ### Common props
@@ -53,11 +54,64 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| `full` | `boolean` | Stretches the widget to fill its parent on both axes in stack mode. |
+| `fullHeight` | `boolean` | Stretches the widget to the full height of its parent in stack mode. |
+| `fullWidth` | `boolean` | Stretches the widget to the full width of its parent. |
+| `center` | `boolean` | Centres the widget on both axes in stack mode. |
+| `centerY` | `boolean` | Centres the widget vertically in stack mode. |
+| `centerX` | `boolean` | Centres the widget horizontally in stack mode. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
+| `z` | `number` | Alias of `zIndex`. |
+| `end` | `Size` | Logical alias of `right`, used by the stack placement shorthands. |
+| `start` | `Size` | Logical alias of `left`, used by the stack placement shorthands. |
+| `inset` | `Size` | Shorthand for the four edge offsets (`top`/`right`/`bottom`/`left`). |
+| `left` | `Size` | Offset from the left edge. A number is pixels; a string uses any CSS unit. |
+| `bottom` | `Size` | Offset from the bottom edge. A number is pixels; a string uses any CSS unit. |
+| `right` | `Size` | Offset from the right edge. A number is pixels; a string uses any CSS unit. |
+| `top` | `Size` | Offset from the top edge. A number is pixels; a string uses any CSS unit. |
+| `pos` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | Alias of `position`. |
+| `position` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
 | `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
+| `borderTop` | `string` | The top edge of the border alone, for a widget whose rim differs per side. |
+| `borderBottom` | `string` | The bottom edge of the border alone, for a widget whose rim differs per side. |
+| `borderLeft` | `string` | The left edge of the border alone, for a widget whose rim differs per side. |
+| `borderRight` | `string` | The right edge of the border alone, for a widget whose rim differs per side. |
+| `cursor` | `string` | CSS `cursor` value: what the pointer becomes over the widget (`pointer`, `grab`, `not-allowed`). |
+| `display` | `string` | CSS `display` value for the container. |
+| `boxSizing` | `'border-box' \| 'content-box'` | Which box `width` and `height` measure: `border-box` keeps the size you asked for and pushes padding inward. |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Main axis of a flex container: `row` places children side by side, `column` stacks them. |
+| `flexGrow` | `number` | Share of the leftover space this child takes, relative to its siblings. |
+| `flexShrink` | `number` | How readily the child gives space back when the row overflows; `0` keeps its size. |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `fontSize` | `number` | Size of the font. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
 | `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `paddingTop` | `Size` | Space inside the widget, on the top edge only. |
+| `paddingRight` | `Size` | Space inside the widget, on the right edge only. |
+| `paddingBottom` | `Size` | Space inside the widget, on the bottom edge only. |
+| `paddingLeft` | `Size` | Space inside the widget, on the left edge only. |
+| `pt` | `Size` | Alias of `paddingTop`. |
+| `pr` | `Size` | Alias of `paddingRight`. |
+| `pb` | `Size` | Alias of `paddingBottom`. |
+| `pl` | `Size` | Alias of `paddingLeft`. |
 | `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `marginTop` | `Size` | Space outside the widget, on the top edge only. |
+| `marginRight` | `Size` | Space outside the widget, on the right edge only. |
+| `marginBottom` | `Size` | Space outside the widget, on the bottom edge only. |
+| `marginLeft` | `Size` | Space outside the widget, on the left edge only. |
+| `mt` | `Size` | Alias of `marginTop`. |
+| `mr` | `Size` | Alias of `marginRight`. |
+| `mb` | `Size` | Alias of `marginBottom`. |
+| `ml` | `Size` | Alias of `marginLeft`. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
@@ -67,11 +121,23 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 | `filter` | `string` | Raw CSS `filter` value applied to the widget itself, e.g. `blur(4px)`. |
 | `backdropFilter` | `string` | Raw CSS `backdrop-filter` value: what sits behind the widget is blurred through it, which is what makes a translucent card frosted glass. |
 | `maskImage` | `string` | Raw CSS `mask-image` value, used to fade a widget out at its edges instead of cutting it. |
+| `bgImage` | `string` | Image painted behind the widget's content (CSS `background-image`), placed with `bgSize` and `bgPosition`. |
+| `bgSize` | `string` | How the background image fills its box (`cover`, `contain`, or a length). |
+| `bgPosition` | `string` | Where the background image is anchored (`center`, `top`, `50% 20%`). |
+| `bgRepeat` | `string` | Whether the background image tiles; `no-repeat` for a single cover. |
 | `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
 | `visible` | `boolean` | Whether the widget is rendered and visible. |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onPress` | `(event?: Event) => void` | Called with the new value while the thumb moves. |
+| `onClick` | `(event?: Event) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onclick` | `(event?: Event) => void` | Lowercase alias of `onClick`, kept because the shipped templates and the HTML habit write it. |
+| `alignSelf` | `AlignSelf` | Overrides the parent's `alignItems` for this child alone (CSS `align-self`). Alias: `selfAlign`. |
+| `selfAlign` | `AlignSelf` | Alias of `alignSelf`. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `overflowX` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowX` value for the widget. |
+| `overflowY` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowY` value for the widget. |
+| `textOverflow` | `'clip' \| 'ellipsis' \| string` | The `textOverflow` value for the widget. |
+| `whiteSpace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-wrap' \| 'pre-line' \| string` | The `whiteSpace` value for the widget. |
 | `id` | `string` | DOM `id` for the rendered element. |
 | `className` | `string` | CSS class names applied to the rendered element. |
 | `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |
@@ -89,7 +155,7 @@ const volume = Slider({
   min: 0,
   max: 100,
   step: 5,
-  onChanged: (value) => console.log("volume:", value),
+  onPress: (value) => console.log("volume:", value),
 });
 ```
 
@@ -114,14 +180,14 @@ const price = Slider({
     { value: 500, label: "$500" },
     { value: 1000, label: "$1000" },
   ],
-  onChanged: (value) => console.log("price:", value),
+  onPress: (value) => console.log("price:", value),
   onChangeEnd: (value) => console.log("final:", value),
 });
 ```
 
 ## Tips
 
-- onChanged fires continuously while dragging; use onChangeEnd for the value to commit, such as a filter request.
+- onPress fires continuously while dragging; use onChangeEnd for the value to commit, such as a filter request.
 - Set step to snap to meaningful increments instead of every integer.
 - On a vertical slider, width is the rail's length and height its thickness.
 
@@ -131,7 +197,7 @@ const price = Slider({
 
 ## Behavior
 
-- Dragging the track or thumb updates the value and fires onChanged; releasing fires onChangeEnd once.
+- Dragging the track or thumb updates the value and fires onPress; releasing fires onChangeEnd once.
 - The returned element exposes value, min, max, step, setValue() and getValue(), and disconnects its ResizeObserver on unmount.
 - During a drag the fill follows the pointer with no easing; the 0.1s ease belongs to a value that changes by itself, from a key press or setValue().
 
@@ -149,4 +215,4 @@ const price = Slider({
 - **Next:** [Dropdown](Dropdown.md)
 - **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
 
-You are reading **Chapter 2 · Interaction basics** (6 of 8).
+You are reading **Chapter 2 · Interaction basics** (6 of 9).

package/docs/widget/SnackBar.md

@@ -37,7 +37,7 @@ const toast = SnackBar({
 | `margin` | `number \| string` | Space outside the widget, between it and its neighbors. |
 | `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
 | `animationDuration` | `number` | Duration for the animation, in milliseconds. |
-| `zIndex` | `number` | Index used for the z. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
 | `onShow` | `() => void` | Event handler for the `onShow` event. |
 | `onClose` | `() => void` | Fired when the overlay closes. |
 
@@ -99,4 +99,4 @@ const toast = SnackBar({
 - **Next:** [Tooltip](Tooltip.md)
 - **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
 
-You are reading **Chapter 4 · Feedback and overlays** (4 of 10).
+You are reading **Chapter 4 · Feedback and overlays** (4 of 11).

package/docs/widget/Stack.md

@@ -26,7 +26,7 @@ const stack = Stack({
 | Prop | Type | Description |
 | --- | --- | --- |
 | `children` | `Widget[]` | An array of child widgets. Alias: `child` for a single child. |
-| `position` | `'relative' \| 'absolute'` | CSS `position` value, or `stack` for centered stacking. |
+| `position` | `'relative' \| 'absolute' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `alignment` | `'top-left' \| 'top-center' \| 'top-right' \| 'center-left' \| 'center' \| 'center-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | How children are aligned inside the stack. |
 
 ### Common props
@@ -35,11 +35,64 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| `full` | `boolean` | Stretches the widget to fill its parent on both axes in stack mode. |
+| `fullHeight` | `boolean` | Stretches the widget to the full height of its parent in stack mode. |
+| `fullWidth` | `boolean` | Stretches the widget to the full width of its parent. |
+| `center` | `boolean` | Centres the widget on both axes in stack mode. |
+| `centerY` | `boolean` | Centres the widget vertically in stack mode. |
+| `centerX` | `boolean` | Centres the widget horizontally in stack mode. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
+| `z` | `number` | Alias of `zIndex`. |
+| `end` | `Size` | Logical alias of `right`, used by the stack placement shorthands. |
+| `start` | `Size` | Logical alias of `left`, used by the stack placement shorthands. |
+| `inset` | `Size` | Shorthand for the four edge offsets (`top`/`right`/`bottom`/`left`). |
+| `left` | `Size` | Offset from the left edge. A number is pixels; a string uses any CSS unit. |
+| `bottom` | `Size` | Offset from the bottom edge. A number is pixels; a string uses any CSS unit. |
+| `right` | `Size` | Offset from the right edge. A number is pixels; a string uses any CSS unit. |
+| `top` | `Size` | Offset from the top edge. A number is pixels; a string uses any CSS unit. |
+| `pos` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | Alias of `position`. |
+| `position` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
 | `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
+| `borderTop` | `string` | The top edge of the border alone, for a widget whose rim differs per side. |
+| `borderBottom` | `string` | The bottom edge of the border alone, for a widget whose rim differs per side. |
+| `borderLeft` | `string` | The left edge of the border alone, for a widget whose rim differs per side. |
+| `borderRight` | `string` | The right edge of the border alone, for a widget whose rim differs per side. |
+| `cursor` | `string` | CSS `cursor` value: what the pointer becomes over the widget (`pointer`, `grab`, `not-allowed`). |
+| `display` | `string` | CSS `display` value for the container. |
+| `boxSizing` | `'border-box' \| 'content-box'` | Which box `width` and `height` measure: `border-box` keeps the size you asked for and pushes padding inward. |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Main axis of a flex container: `row` places children side by side, `column` stacks them. |
+| `flexGrow` | `number` | Share of the leftover space this child takes, relative to its siblings. |
+| `flexShrink` | `number` | How readily the child gives space back when the row overflows; `0` keeps its size. |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `fontSize` | `number` | Size of the font. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
 | `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `paddingTop` | `Size` | Space inside the widget, on the top edge only. |
+| `paddingRight` | `Size` | Space inside the widget, on the right edge only. |
+| `paddingBottom` | `Size` | Space inside the widget, on the bottom edge only. |
+| `paddingLeft` | `Size` | Space inside the widget, on the left edge only. |
+| `pt` | `Size` | Alias of `paddingTop`. |
+| `pr` | `Size` | Alias of `paddingRight`. |
+| `pb` | `Size` | Alias of `paddingBottom`. |
+| `pl` | `Size` | Alias of `paddingLeft`. |
 | `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `marginTop` | `Size` | Space outside the widget, on the top edge only. |
+| `marginRight` | `Size` | Space outside the widget, on the right edge only. |
+| `marginBottom` | `Size` | Space outside the widget, on the bottom edge only. |
+| `marginLeft` | `Size` | Space outside the widget, on the left edge only. |
+| `mt` | `Size` | Alias of `marginTop`. |
+| `mr` | `Size` | Alias of `marginRight`. |
+| `mb` | `Size` | Alias of `marginBottom`. |
+| `ml` | `Size` | Alias of `marginLeft`. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
@@ -49,11 +102,23 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 | `filter` | `string` | Raw CSS `filter` value applied to the widget itself, e.g. `blur(4px)`. |
 | `backdropFilter` | `string` | Raw CSS `backdrop-filter` value: what sits behind the widget is blurred through it, which is what makes a translucent card frosted glass. |
 | `maskImage` | `string` | Raw CSS `mask-image` value, used to fade a widget out at its edges instead of cutting it. |
+| `bgImage` | `string` | Image painted behind the widget's content (CSS `background-image`), placed with `bgSize` and `bgPosition`. |
+| `bgSize` | `string` | How the background image fills its box (`cover`, `contain`, or a length). |
+| `bgPosition` | `string` | Where the background image is anchored (`center`, `top`, `50% 20%`). |
+| `bgRepeat` | `string` | Whether the background image tiles; `no-repeat` for a single cover. |
 | `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
 | `visible` | `boolean` | Whether the widget is rendered and visible. |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onPress` | `(event?: Event) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(event?: Event) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onclick` | `(event?: Event) => void` | Lowercase alias of `onClick`, kept because the shipped templates and the HTML habit write it. |
+| `alignSelf` | `AlignSelf` | Overrides the parent's `alignItems` for this child alone (CSS `align-self`). Alias: `selfAlign`. |
+| `selfAlign` | `AlignSelf` | Alias of `alignSelf`. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `overflowX` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowX` value for the widget. |
+| `overflowY` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowY` value for the widget. |
+| `textOverflow` | `'clip' \| 'ellipsis' \| string` | The `textOverflow` value for the widget. |
+| `whiteSpace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-wrap' \| 'pre-line' \| string` | The `whiteSpace` value for the widget. |
 | `id` | `string` | DOM `id` for the rendered element. |
 | `className` | `string` | CSS class names applied to the rendered element. |
 | `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |

package/docs/widget/Stepper.md

@@ -38,7 +38,7 @@ const stepper = Stepper({
 | `onFinish` | `() => void` | Event handler for the `onFinish` event. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `borderRadius` | `number` | Rounds the corners of the widget. |
-| `border` | `string` | The `border` value for the widget. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
 | `borderColor` | `Color` | Color used for the border. |
 | `borderWidth` | `number` | Width of the border. |
 | `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
@@ -52,11 +52,64 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 
 | Prop | Type | Description |
 | --- | --- | --- |
+| `full` | `boolean` | Stretches the widget to fill its parent on both axes in stack mode. |
+| `fullHeight` | `boolean` | Stretches the widget to the full height of its parent in stack mode. |
+| `fullWidth` | `boolean` | Stretches the widget to the full width of its parent. |
+| `center` | `boolean` | Centres the widget on both axes in stack mode. |
+| `centerY` | `boolean` | Centres the widget vertically in stack mode. |
+| `centerX` | `boolean` | Centres the widget horizontally in stack mode. |
+| `zIndex` | `number` | Stacking order: a widget with a higher value paints above lower ones. |
+| `z` | `number` | Alias of `zIndex`. |
+| `end` | `Size` | Logical alias of `right`, used by the stack placement shorthands. |
+| `start` | `Size` | Logical alias of `left`, used by the stack placement shorthands. |
+| `inset` | `Size` | Shorthand for the four edge offsets (`top`/`right`/`bottom`/`left`). |
+| `left` | `Size` | Offset from the left edge. A number is pixels; a string uses any CSS unit. |
+| `bottom` | `Size` | Offset from the bottom edge. A number is pixels; a string uses any CSS unit. |
+| `right` | `Size` | Offset from the right edge. A number is pixels; a string uses any CSS unit. |
+| `top` | `Size` | Offset from the top edge. A number is pixels; a string uses any CSS unit. |
+| `pos` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | Alias of `position`. |
+| `position` | `'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky' \| 'stack'` | CSS `position` value, or `stack` for centered stacking. |
 | `width` | `Size` | Width of the widget. A number is pixels; a string uses any CSS unit. |
 | `height` | `Size` | Height of the widget. A number is pixels; a string uses any CSS unit. |
 | `size` | `Size` | Overall size preset or pixel value, depending on the widget. |
+| `flex` | `number` | Flex grow/shrink/basis shorthand for a flex child. |
+| `minWidth` | `Size` | Minimum width the widget may shrink to. |
+| `maxWidth` | `Size` | Maximum width the widget may grow to. |
+| `minHeight` | `Size` | Minimum height the widget may shrink to. |
+| `maxHeight` | `Size` | Maximum height the widget may grow to. |
+| `border` | `string` | CSS `border` shorthand for all four edges: width, style and color in one string. |
+| `borderTop` | `string` | The top edge of the border alone, for a widget whose rim differs per side. |
+| `borderBottom` | `string` | The bottom edge of the border alone, for a widget whose rim differs per side. |
+| `borderLeft` | `string` | The left edge of the border alone, for a widget whose rim differs per side. |
+| `borderRight` | `string` | The right edge of the border alone, for a widget whose rim differs per side. |
+| `cursor` | `string` | CSS `cursor` value: what the pointer becomes over the widget (`pointer`, `grab`, `not-allowed`). |
+| `display` | `string` | CSS `display` value for the container. |
+| `boxSizing` | `'border-box' \| 'content-box'` | Which box `width` and `height` measure: `border-box` keeps the size you asked for and pushes padding inward. |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Main axis of a flex container: `row` places children side by side, `column` stacks them. |
+| `flexGrow` | `number` | Share of the leftover space this child takes, relative to its siblings. |
+| `flexShrink` | `number` | How readily the child gives space back when the row overflows; `0` keeps its size. |
+| `gap` | `number \| string` | Space between children along the layout axis. |
+| `fontSize` | `number` | Size of the font. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
 | `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `paddingTop` | `Size` | Space inside the widget, on the top edge only. |
+| `paddingRight` | `Size` | Space inside the widget, on the right edge only. |
+| `paddingBottom` | `Size` | Space inside the widget, on the bottom edge only. |
+| `paddingLeft` | `Size` | Space inside the widget, on the left edge only. |
+| `pt` | `Size` | Alias of `paddingTop`. |
+| `pr` | `Size` | Alias of `paddingRight`. |
+| `pb` | `Size` | Alias of `paddingBottom`. |
+| `pl` | `Size` | Alias of `paddingLeft`. |
 | `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `marginTop` | `Size` | Space outside the widget, on the top edge only. |
+| `marginRight` | `Size` | Space outside the widget, on the right edge only. |
+| `marginBottom` | `Size` | Space outside the widget, on the bottom edge only. |
+| `marginLeft` | `Size` | Space outside the widget, on the left edge only. |
+| `mt` | `Size` | Alias of `marginTop`. |
+| `mr` | `Size` | Alias of `marginRight`. |
+| `mb` | `Size` | Alias of `marginBottom`. |
+| `ml` | `Size` | Alias of `marginLeft`. |
 | `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
 | `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
@@ -66,11 +119,23 @@ Every widget also accepts these shared props — see [common props](COMMON_PROPS
 | `filter` | `string` | Raw CSS `filter` value applied to the widget itself, e.g. `blur(4px)`. |
 | `backdropFilter` | `string` | Raw CSS `backdrop-filter` value: what sits behind the widget is blurred through it, which is what makes a translucent card frosted glass. |
 | `maskImage` | `string` | Raw CSS `mask-image` value, used to fade a widget out at its edges instead of cutting it. |
+| `bgImage` | `string` | Image painted behind the widget's content (CSS `background-image`), placed with `bgSize` and `bgPosition`. |
+| `bgSize` | `string` | How the background image fills its box (`cover`, `contain`, or a length). |
+| `bgPosition` | `string` | Where the background image is anchored (`center`, `top`, `50% 20%`). |
+| `bgRepeat` | `string` | Whether the background image tiles; `no-repeat` for a single cover. |
 | `opacity` | `number` | Opacity from 0 (invisible) to 1 (fully opaque). |
 | `visible` | `boolean` | Whether the widget is rendered and visible. |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
-| `onPress` | `(widget: Widget) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
-| `onClick` | `(widget: Widget) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onPress` | `(event?: Event) => void` | Callback fired when the widget is pressed. Alias: `onClick`. |
+| `onClick` | `(event?: Event) => void` | Callback fired when the widget is clicked. Alias: `onPress`. |
+| `onclick` | `(event?: Event) => void` | Lowercase alias of `onClick`, kept because the shipped templates and the HTML habit write it. |
+| `alignSelf` | `AlignSelf` | Overrides the parent's `alignItems` for this child alone (CSS `align-self`). Alias: `selfAlign`. |
+| `selfAlign` | `AlignSelf` | Alias of `alignSelf`. |
+| `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | How overflowing content is handled (`hidden`, `auto`, `scroll`). |
+| `overflowX` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowX` value for the widget. |
+| `overflowY` | `'auto' \| 'hidden' \| 'visible' \| 'scroll' \| 'clip'` | The `overflowY` value for the widget. |
+| `textOverflow` | `'clip' \| 'ellipsis' \| string` | The `textOverflow` value for the widget. |
+| `whiteSpace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-wrap' \| 'pre-line' \| string` | The `whiteSpace` value for the widget. |
 | `id` | `string` | DOM `id` for the rendered element. |
 | `className` | `string` | CSS class names applied to the rendered element. |
 | `ref` | `(widget: Widget) => void` | Callback that receives the underlying DOM node. |