flet-box 1.1.2 → 1.1.3

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. |

package/docs/widget/Switch.md

@@ -23,7 +23,8 @@ const darkMode = Switch({
 | Prop | Type | Description |
 | --- | --- | --- |
 | `value` | `boolean` | Current value controlled by the widget. |
-| `onToggle` | `(value: boolean) => void` | Fired with the new toggled state. |
+| `onToggle` | `(value: boolean) => void` | Deprecated alias of `onPress`. |
+| `onPress` | `(value: boolean) => void` | Called with the new toggled state (`true` or `false`). |
 | `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
 | `size` | `'small' \| 'medium' \| 'large'` | Overall size preset or pixel value, depending on the widget. |
 | `activeColor` | `Color` | Color used in the active state. |
@@ -35,11 +36,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 +103,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 toggled state (`true` or `false`). |
+| `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. |
@@ -70,7 +136,7 @@ const notifications = Switch({
   value: true,
   label: "Notifications",
   activeColor: "#16a34a",
-  onToggle: (value) => console.log("notifications:", value),
+  onPress: (value) => console.log("notifications:", value),
 });
 ```
 
@@ -85,7 +151,7 @@ const wifi = Switch({
   size: "large",
   activeColor: "#2563eb",
   disabled: false,
-  onToggle: (value) => {
+  onPress: (value) => {
     console.log("wifi toggled:", value);
   },
 });
@@ -94,7 +160,7 @@ const wifi = Switch({
 ## Tips
 
 - Reserve Switch for immediate settings and use Checkbox when the choice is part of a form you submit.
-- onToggle receives the new boolean, so you can store it directly in your state.
+- onPress receives the new boolean, so you can store it directly in your state.
 
 ## Accessibility
 
@@ -102,7 +168,7 @@ const wifi = Switch({
 
 ## Behavior
 
-- Switch works uncontrolled when value is omitted: clicking toggles the internal state and fires onToggle.
+- Switch works uncontrolled when value is omitted: clicking toggles the internal state and fires onPress.
 - The returned element exposes getValue() and updateValue(v) to read or set the state without a click.
 
 ## Related widgets
@@ -119,4 +185,4 @@ const wifi = Switch({
 - **Next:** [Slider](Slider.md)
 - **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
 
-You are reading **Chapter 2 · Interaction basics** (5 of 8).
+You are reading **Chapter 2 · Interaction basics** (5 of 9).

package/docs/widget/Text.md

@@ -27,15 +27,17 @@ const title = Text({
 | `children` | `string` | An array of child widgets. Alias: `child` for a single child. |
 | `size` | `number` | Overall size preset or pixel value, depending on the widget. |
 | `color` | `Color` | Foreground color, usually the text or icon color. |
-| `weight` | `'normal' \| 'bold' \| number` | Font weight, such as `normal`, `bold`, or a number. |
+| `weight` | `'normal' \| 'bold' \| 'bolder' \| 'lighter' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900' \| number` | Font weight, such as `normal`, `bold`, or a number. |
 | `align` | `'left' \| 'center' \| 'right' \| 'justify'` | Horizontal text alignment. |
 | `italic` | `boolean` | Renders the text in italics. |
 | `decoration` | `'underline' \| 'line-through' \| 'overline'` | Text decoration such as `underline` or `line-through`. |
 | `lineHeight` | `number \| string` | Line height as a number multiplier or CSS value. |
 | `letterSpacing` | `number \| string` | Extra space between letters. |
+| `textStroke` | `string` | The `textStroke` value for the widget. |
+| `paintOrder` | `string` | The `paintOrder` value for the widget. |
 | `type` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'` | Kind or mode of the widget. |
 | `styles` | `Array<'bold' \| 'italic' \| 'underline' \| 'strikethrough' \| 'mark' \| 'small' \| 'code'>` | Extra inline styles applied to the text. |
-| `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
 
@@ -43,11 +45,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. |
@@ -57,11 +112,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. |