> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# Styled Bottom Sheet

> showStyledBottomSheet<T> — the floating-card modal bottom sheet

Unlike the other components, the styled bottom sheet is a **function**, not a widget class — it wraps `showModalBottomSheet` and builds the styled chrome around your content. Source: [`styled_bottom_sheet.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_bottom_sheet.dart).

```dart theme={null}
final result = await showStyledBottomSheet<bool>(
  context: context,
  child: FeedbackForm(),
);
```

## API

```dart theme={null}
Future<T?> showStyledBottomSheet<T>({
  required BuildContext context,
  bool hideCloseButton = false,
  bool enableDrag = true,
  VoidCallback? onClose,
  required Widget child,
})
```

| Parameter | Default | Notes |
| - | - | - |
| `context` | **required** | Modal is pushed on this context's navigator |
| `child` | **required** | Sheet content, padded 24 horizontal / 32 vertical |
| `hideCloseButton` | `false` | Hide the corner close button |
| `enableDrag` | `true` | Drag-to-dismiss |
| `onClose` | `Navigator.pop` | Custom close handling |

## Behavior & anatomy

* Renders as a **floating card**, not an edge-to-edge sheet: a [`StyledCard`](https://design.slingshotai.com/components/styled-card) with radius 24 and `surfaceBg` fill, inset 8 px from the sides and 16 px from the bottom (plus the keyboard inset — the sheet rises with the keyboard via `viewInsets`).
* `isScrollControlled: true` — the sheet sizes to its content, beyond half-screen if needed.
* **`isDismissible: false`** — tapping the barrier does *not* dismiss; users close via the button, drag, or your own actions. Keep the close button visible unless you provide an explicit alternative.
* The close button is a rotated `add_circle_sharp` icon (45° → an ×) at the top-right.
* Returns the modal's `Future<T?>` — resolve it with `Navigator.pop(context, value)`.

## Tokens consumed

`surfaceBg` (card fill); the close icon inherits `IconButtonTheme` (`contrastMedium`).

## Real usage

`lib/widgets/feedback/feedback_rating_form.dart` presents the session-feedback flow in a styled sheet.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.