flet-box 1.0.4 → 1.0.6

package/docs/widget/MatrixRain.md

@@ -0,0 +1,122 @@
+# MatrixRain
+
+A canvas-based Matrix-style effect where random characters cascade down the screen. It runs a continuous animation loop with configurable speed and fade.
+
+## When to use it
+
+Use it as a full-viewport backdrop or an ambient section background for a retro-tech aesthetic.
+
+## Quick start
+
+```javascript
+import { MatrixRain } from "flet-box";
+
+const rain = MatrixRain({});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `chars` | `string` | Characters used by the matrix rain. |
+| `fontSize` | `number` | Size of the font. |
+| `speed` | `number` | Animation speed. |
+| `fadeAmount` | `number` | How quickly trails fade each frame. |
+| `resetProbability` | `number` | Chance a column resets to the top each frame. |
+| `useDynamicColor` | `boolean` | Cycles colors instead of using a fixed color. |
+| `position` | `'fixed' \| 'absolute'` | CSS `position` value, or `stack` for centered stacking. |
+| `zIndex` | `number` | Index used for the z. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `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. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `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`. |
+| `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. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { MatrixRain } from "flet-box";
+
+const rain = MatrixRain({
+  fontSize: 18,
+  speed: 0.6,
+  position: "fixed",
+});
+```
+
+### Full
+
+```javascript
+import { MatrixRain } from "flet-box";
+
+const rain = MatrixRain({
+  chars: "01",
+  fontSize: 20,
+  speed: 0.8,
+  fadeAmount: 0.08,
+  resetProbability: 0.98,
+  useDynamicColor: true,
+  position: "fixed",
+  zIndex: 1,
+});
+```
+
+## Tips
+
+- position: "fixed" fills the viewport; "absolute" fills a positioned parent
+- instead.
+- Set zIndex low (1 or negative) so the rain renders behind your regular UI.
+- Tune resetProbability closer to 1 to make trails longer or drops rarer.
+
+## Accessibility
+
+- The rain is decorative canvas output; pair it with real content on top and make it
+- pausable for motion-sensitive users.
+
+## Behavior
+
+- The returned canvas runs its animation loop immediately and exposes _cleanup() to
+- stop drawing and disconnect the ResizeObserver.
+- Changing speed or fadeAmount only affects future frames; update them before mount
+- for a clean start.
+
+## Related widgets
+
+- [Container](Container.md)
+- [Card](Card.md)
+- [AnimatedBox](AnimatedBox.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [AnimatedText](AnimatedText.md)
+- **Next:** [ParallaxBox](ParallaxBox.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 6 · Data, rich content & effects** (12 of 13).

package/docs/widget/Modal.md

@@ -0,0 +1,129 @@
+# Modal
+
+A centered dialog over a dimmed overlay that holds a title, content and a row of actions.
+
+## When to use it
+
+Use Modal when the user must focus on a task or read something without leaving the page.
+
+## Quick start
+
+```javascript
+import { Modal } from "flet-box";
+
+const dialog = Modal({
+  title: "Welcome",
+  content: "Thanks for signing up.",
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Title text shown in the header. |
+| `content` | `Widget \| string` | Main content of the overlay. |
+| `actions` | `Widget[]` | Widgets rendered in the overlay footer. |
+| `closeOnOverlayClick` | `boolean` | Closes the overlay when the backdrop is clicked. |
+| `closeOnEsc` | `boolean` | Closes the overlay when Escape is pressed. |
+| `width` | `number \| string` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `minWidth` | `number` | Minimum width the widget may shrink to. |
+| `maxWidth` | `number \| string` | Maximum width the widget may grow to. |
+| `maxHeight` | `number \| string` | Maximum height the widget may grow to. |
+| `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `border` | `string` | The `border` value for the widget. |
+| `borderColor` | `Color` | Color used for the border. |
+| `borderWidth` | `number` | Width of the border. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `contentBgColor` | `Color` | Background color for the content. |
+| `contentElevation` | `number` | Elevation (shadow depth) of the content. |
+| `headerBgColor` | `Color` | Background color of the header row. |
+| `headerTextColor` | `Color` | Text color of the header row. |
+| `headerBorder` | `string \| false` | The `headerBorder` value for the widget. |
+| `headerPadding` | `Padding` | Padding for the header. |
+| `headerElevation` | `number` | Elevation (shadow depth) of the header. |
+| `footerBgColor` | `Color` | Background color for the footer. |
+| `footerBorder` | `string \| false` | The `footerBorder` value for the widget. |
+| `footerPadding` | `Padding` | Padding for the footer. |
+| `footerElevation` | `number` | Elevation (shadow depth) of the footer. |
+| `overlayColor` | `Color` | Color of the dimmed backdrop behind the overlay. |
+| `showCloseButton` | `boolean` | Shows a close button in the header. |
+| `zIndex` | `number` | Index used for the z. |
+| `onOpen` | `() => void` | Fired when the overlay opens. |
+| `onClose` | `() => void` | Fired when the overlay closes. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Modal } from "flet-box";
+
+const profile = Modal({
+  title: "Profile",
+  content: "Update your account details.",
+  closeOnOverlayClick: true,
+  onClose: () => console.log("closed"),
+});
+```
+
+### Full
+
+```javascript
+import { Button, Column, Modal, Switch, rgba } from "flet-box";
+
+const settings = Modal({
+  title: "Settings",
+  content: Column({
+    gap: 12,
+    children: [Switch({ label: "Dark mode" }), Switch({ label: "Compact" })],
+  }),
+  actions: [
+    Button({ text: "Cancel", variant: "text" }),
+    Button({ text: "Save", onPress: () => settings.close() }),
+  ],
+  closeOnOverlayClick: false,
+  closeOnEsc: true,
+  width: 480,
+  borderRadius: 16,
+  elevation: 8,
+  overlayColor: "rgba(15, 23, 42, 0.5)",
+  onOpen: () => console.log("opened"),
+  onClose: () => console.log("closed"),
+});
+```
+
+## Tips
+
+- Modal manages its own overlay and appends it to document.body; call the returned open() and close() to control visibility.
+- Use closeOnOverlayClick: false for destructive or data-entry dialogs that should not be dismissed by a stray click.
+
+## Accessibility
+
+- Modal does not move focus automatically; focus the first control or a close button when it opens.
+
+## Behavior
+
+- Returns a controller with open, close, toggle, destroy and an isOpen getter, plus updateContent, updateTitle and setLoading helpers.
+- onOpen and onClose fire on state changes, and closeOnEsc installs an Escape listener that destroy() removes.
+
+## Related widgets
+
+- [BottomSheet](BottomSheet.md)
+- [AlertDialog](AlertDialog.md)
+- [Card](Card.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [AlertDialog](AlertDialog.md)
+- **Next:** [BottomSheet](BottomSheet.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 4 · Feedback and overlays** (2 of 10).

package/docs/widget/Pagination.md

@@ -0,0 +1,135 @@
+# Pagination
+
+Pagination renders page controls derived from totalItems and pageSize, with optional first/last and prev/next buttons. It reports the chosen page through onPageChange.
+
+## When to use it
+
+Use it under long lists or tables so users can move through paged results.
+
+## Quick start
+
+```javascript
+import { Pagination } from "flet-box";
+
+const pages = Pagination({
+  totalItems: 100,
+  pageSize: 10,
+  onPageChange: (page) => console.log(page),
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `totalItems` | `number` | Total number of items to paginate. |
+| `pageSize` | `number` | Number of items per page. |
+| `currentPage` | `number` | Currently active page. |
+| `onPageChange` | `(page: number) => void` | Fired with the new page number. |
+| `showFirstLast` | `boolean` | Shows first and last page buttons. |
+| `showPrevNext` | `boolean` | Shows previous and next page buttons. |
+| `maxButtons` | `number` | Maximum number of page buttons before truncation. |
+| `variant` | `'outlined' \| 'filled' \| 'text'` | Visual variation or style preset. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `size` | `'small' \| 'medium' \| 'large'` | Overall size preset or pixel value, depending on the widget. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `showTotal` | `boolean` | Controls whether the total is shown. |
+| `label` | `string` | Label or caption shown near the control. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `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. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `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`. |
+| `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. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Pagination } from "flet-box";
+
+const pages = Pagination({
+  totalItems: 248,
+  pageSize: 20,
+  currentPage: 1,
+  showPrevNext: true,
+  showFirstLast: true,
+  onPageChange: (page) => loadPage(page),
+});
+```
+
+### Full
+
+```javascript
+import { Pagination } from "flet-box";
+
+const pages = Pagination({
+  totalItems: 512,
+  pageSize: 25,
+  currentPage: 4,
+  maxButtons: 7,
+  variant: "filled",
+  size: "medium",
+  showFirstLast: true,
+  showPrevNext: true,
+  showTotal: true,
+  label: "Rows",
+  color: "#2563eb",
+  onPageChange: (page) => loadPage(page),
+});
+```
+
+## Tips
+
+- Provide totalItems and pageSize; the number of pages is computed for you.
+- Control the active page with currentPage and update it inside onPageChange.
+- Use maxButtons to limit how many page buttons appear before they collapse.
+
+## Accessibility
+
+- Ensure the current page is distinguishable and that controls are reachable by keyboard.
+- Pair pagination with a visible total by enabling showTotal so users know how much data exists.
+
+## Behavior
+
+- Pages are recalculated whenever totalItems, pageSize or currentPage change.
+- onPageChange fires with the new page number when the user navigates.
+
+## Related widgets
+
+- [DataTable](DataTable.md)
+- [ListView](ListView.md)
+- [Button](Button.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [FloatingActionButton](FloatingActionButton.md)
+- **Next:** [Stepper](Stepper.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 4 · Feedback and overlays** (10 of 10).

package/docs/widget/ParallaxBox.md

@@ -0,0 +1,128 @@
+# ParallaxBox
+
+A container that shifts its child in response to scroll, mouse position, or hover entry. It clamps movement to a max offset and eases with a transition.
+
+## When to use it
+
+Use it to give hero sections or layered illustrations depth as the user scrolls or moves the pointer.
+
+## Quick start
+
+```javascript
+import { ParallaxBox, Text } from "flet-box";
+
+const scene = ParallaxBox({
+  child: Text({ text: "Scroll me" }),
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `child` | `Widget` | A single child widget. Alias: `children` for a list. |
+| `type` | `'scroll' \| 'mouse' \| 'hover'` | Kind or mode of the widget. |
+| `speed` | `number` | Animation speed. |
+| `direction` | `'vertical' \| 'horizontal' \| 'both'` | Main-axis direction for layout widgets (`row` or `column`). |
+| `maxOffset` | `number` | Maximum parallax offset in pixels. |
+| `reverse` | `boolean` | Reverses the parallax direction. |
+| `disabled` | `boolean` | Disables interaction and shows the non-interactive state. |
+| `onParallaxMove` | `(offset: { x: number; y: number }) => void` | Fired as the parallax offset changes. |
+| `duration` | `number` | How long the transient element stays visible, in milliseconds. |
+| `easing` | `string` | Easing curve for the parallax motion. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `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. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `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`. |
+| `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. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { Image, ParallaxBox } from "flet-box";
+
+const scene = ParallaxBox({
+  child: Image({ src: "/artwork.jpg", alt: "Layer 1" }),
+  type: "scroll",
+  speed: 0.6,
+});
+```
+
+### Full
+
+```javascript
+import { Image, ParallaxBox } from "flet-box";
+
+const scene = ParallaxBox({
+  child: Image({ src: "/team/hero.png", alt: "Hero layer" }),
+  type: "mouse",
+  speed: 0.4,
+  direction: "both",
+  maxOffset: 40,
+  reverse: true,
+  duration: 250,
+  easing: "ease-out",
+  onParallaxMove: (offset) => console.log(offset.x, offset.y),
+});
+```
+
+## Tips
+
+- type: "scroll" follows the window scroll; "mouse" tracks the pointer relative to
+- the widget center; "hover" snaps on entry and resets on leave.
+- Raise speed for a more pronounced shift, and keep maxOffset small so content never
+- strays far from its layout box.
+- Use reverse: true to invert the direction when the natural movement feels wrong.
+
+## Accessibility
+
+- Parallax is decorative motion; make sure content stays readable without it and keep
+- movement gentle.
+
+## Behavior
+
+- The exposed element provides updateSpeed, updateDirection, setPosition, and reset
+- for runtime control.
+- Transforms are clamped to maxOffset and cleaned up via _cleanup(), which removes all
+- event listeners on destroy.
+
+## Related widgets
+
+- [AnimatedBox](AnimatedBox.md)
+- [Image](Image.md)
+- [Container](Container.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [MatrixRain](MatrixRain.md)
+- **Next:** [Audio](Audio.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 6 · Data, rich content & effects** (13 of 13).

package/docs/widget/ProgressBar.md

@@ -0,0 +1,130 @@
+# ProgressBar
+
+A horizontal bar that visualizes completion from zero to max. It can show a label and numeric value, or run as an indeterminate loader.
+
+## When to use it
+
+Use it to report progress such as uploads, multi-step flows, or budget usage.
+
+## Quick start
+
+```javascript
+import { ProgressBar } from "flet-box";
+
+const progress = ProgressBar({
+  value: 60,
+});
+```
+
+> The prop table is generated from `src/index.d.ts`; the examples use only documented props.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `number` | Current value controlled by the widget. |
+| `max` | `number` | Maximum value used to compute the ratio. |
+| `height` | `number` | Height of the widget. A number is pixels; a string uses any CSS unit. |
+| `width` | `number \| string` | Width of the widget. A number is pixels; a string uses any CSS unit. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `backgroundColor` | `Color` | Background color. Alias of `bgColor`. |
+| `borderRadius` | `number` | Rounds the corners of the widget. |
+| `label` | `string` | Label or caption shown near the control. |
+| `showValue` | `boolean` | Shows the numeric value next to the indicator. |
+| `valuePosition` | `'left' \| 'right' \| 'top' \| 'bottom'` | Where the value label is placed. |
+| `indeterminate` | `boolean` | Shows an unknown-progress animation. |
+| `striped` | `boolean` | Draws diagonal stripes across the bar. |
+| `animatedStripes` | `boolean` | Animates the stripes on the bar. |
+
+### Common props
+
+Every widget also accepts these shared props — see [common props](COMMON_PROPS.md) for the full rules and aliases.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `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. |
+| `padding` | `Padding` | Space inside the widget, between its content and its border. |
+| `margin` | `Margin` | Space outside the widget, between it and its neighbors. |
+| `bgColor` | `Color` | Background color. Alias: `backgroundColor`. |
+| `color` | `Color` | Foreground color, usually the text or icon color. |
+| `borderRadius` | `number \| string` | Rounds the corners of the widget. |
+| `elevation` | `number` | Shadow depth. Higher values lift the widget off the page. |
+| `shadow` | `string` | Raw CSS `box-shadow` value, for a custom shadow. |
+| `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`. |
+| `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. |
+| `disableTransform` | `boolean` | Disables the default press/scale transform animation. |
+
+## Examples
+
+### Everyday
+
+```javascript
+import { ProgressBar } from "flet-box";
+
+const progress = ProgressBar({
+  value: 60,
+  max: 100,
+  height: 8,
+  color: "#2563eb",
+  backgroundColor: "#e2e8f0",
+});
+```
+
+### Full
+
+```javascript
+import { ProgressBar } from "flet-box";
+
+const progress = ProgressBar({
+  value: 72,
+  max: 100,
+  width: "100%",
+  height: 12,
+  color: "#16a34a",
+  backgroundColor: "#e5e7eb",
+  borderRadius: 6,
+  label: "Upload",
+  showValue: true,
+  valuePosition: "right",
+  striped: true,
+  animatedStripes: true,
+});
+```
+
+## Tips
+
+- Set indeterminate: true when the duration is unknown and no numeric value applies.
+- Combine showValue with valuePosition to place the percentage beside the bar.
+
+## Accessibility
+
+- Include label so the bar is announced with context, not just as a length.
+
+## Behavior
+
+- value is clamped against max, so 120 with max 100 renders as full.
+- striped and animatedStripes add motion cues without changing the value.
+
+## Related widgets
+
+- [CircularBar](CircularBar.md)
+- [Skeleton](Skeleton.md)
+- [Rating](Rating.md)
+
+---
+
+## Continue reading
+
+- **Previous:** [Tooltip](Tooltip.md)
+- **Next:** [CircularBar](CircularBar.md)
+- **Index:** [Widget index](README.md) · [Start here](START_HERE.md)
+
+You are reading **Chapter 4 · Feedback and overlays** (6 of 10).