From 4109f9f3e64328c074865b87b23f717823821f73 Mon Sep 17 00:00:00 2001
From: Ayush-1812 <ayushjangid5102@gmail.com>
Date: Fri, 21 Aug 2026 00:52:31 +0530
Subject: [PATCH] fixed bottomSheetComponent

Signed-off-by: Ayush-1812 <ayushjangid5102@gmail.com>
---
 .../sistent/components/bottom-sheet/code.mdx  | 306 ++++++++++++++++++
 .../components/bottom-sheet/guidance.mdx      | 279 ++++++++++++++++
 .../sistent/components/bottom-sheet/index.mdx | 105 ++++++
 3 files changed, 690 insertions(+)
 create mode 100644 src/collections/sistent/components/bottom-sheet/code.mdx
 create mode 100644 src/collections/sistent/components/bottom-sheet/guidance.mdx
 create mode 100644 src/collections/sistent/components/bottom-sheet/index.mdx

diff --git a/src/collections/sistent/components/bottom-sheet/code.mdx b/src/collections/sistent/components/bottom-sheet/code.mdx
new file mode 100644
index 0000000000000..07cf9778435f4
--- /dev/null
+++ b/src/collections/sistent/components/bottom-sheet/code.mdx
@@ -0,0 +1,306 @@
+---
+title: BottomSheet Code
+component: bottom-sheet
+description: Code examples covering the basic bottom sheet, headerless sheets, action lists, scrollable content, and custom header colors.
+---
+
+import { useState } from "react";
+import {
+  BottomSheet,
+  Button,
+  Box,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemText,
+  Divider,
+} from "@sistent/sistent";
+
+export const BasicDemo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Box>
+      <Button
+        variant="contained"
+        label="Open Bottom Sheet"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Bottom Sheet"
+      >
+        <Typography variant="body2">
+          The sheet slides up from the bottom edge and can be dismissed with the
+          close button, a backdrop click, or the Escape key.
+        </Typography>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const HeaderlessDemo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        label="Open Without Header"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet open={open} onClose={() => setOpen(false)}>
+        <Typography variant="body2" sx={{ mb: 2 }}>
+          Omitting the title renders the body only, with no header row and no
+          close button.
+        </Typography>
+        <Button
+          variant="contained"
+          label="Done"
+          onClick={() => setOpen(false)}
+        />
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const ActionListDemo = () => {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const actions = ["Share", "Duplicate", "Move to folder", "Delete"];
+  const handleSelect = (action) => {
+    setSelected(action);
+    setOpen(false);
+  };
+  return (
+    <Box>
+      <Button
+        variant="contained"
+        label="Open Action List"
+        onClick={() => setOpen(true)}
+      />
+      {selected && (
+        <Typography variant="body2" sx={{ mt: 1 }}>
+          Selected: {selected}
+        </Typography>
+      )}
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Choose an Action"
+      >
+        <List disablePadding>
+          {actions.map((action) => (
+            <ListItemButton key={action} onClick={() => handleSelect(action)}>
+              <ListItemText primary={action} />
+            </ListItemButton>
+          ))}
+        </List>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const ScrollableDemo = () => {
+  const [open, setOpen] = useState(false);
+  const rows = Array.from({ length: 20 }, (_, index) => `Resource ${index + 1}`);
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        label="Open Scrollable Sheet"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="All Resources"
+        maxHeight="50vh"
+      >
+        {rows.map((row, index) => (
+          <Box key={row}>
+            <Typography variant="body2" sx={{ py: 1 }}>
+              {row}
+            </Typography>
+            {index < rows.length - 1 && <Divider />}
+          </Box>
+        ))}
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const CustomHeaderDemo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Box>
+      <Button
+        variant="contained"
+        label="Open With Custom Header"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Connection Removed"
+        headerBackgroundColor="#00B39F"
+        headerTextColor="#000000"
+        closeButtonAriaLabel="Close connection notice"
+      >
+        <Typography variant="body2">
+          The header background and text colors are overridden, and the close
+          button carries a specific accessible label.
+        </Typography>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+Code examples covering the common bottom sheet configurations.
+
+<a id="Basic Bottom Sheet">
+  <h2>Basic Bottom Sheet</h2>
+</a>
+
+A titled sheet holding a short piece of content. The `open` prop is driven by state and `onClose` resets it.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <BasicDemo />
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="bottom-sheet-basic" collapsible code={`const [open, setOpen] = useState(false);
+
+<Button
+  variant="contained"
+  label="Open Bottom Sheet"
+  onClick={() => setOpen(true)}
+/>
+<BottomSheet
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Bottom Sheet"
+>
+  <Typography variant="body2">
+    The sheet slides up from the bottom edge and can be dismissed with the
+    close button, a backdrop click, or the Escape key.
+  </Typography>
+</BottomSheet>`} />
+</div>
+
+<a id="Without a Header">
+  <h2>Without a Header</h2>
+</a>
+
+Omitting `title` drops the header row and its close button. Provide another way out of the sheet, such as an action in the body, alongside the backdrop and Escape key.
+
+`title` is the only prop wired to `aria-labelledby`, so a headerless sheet has no accessible name of its own. Reserve this variant for short, self-describing bodies like the one below, and supply a `title` whenever the sheet needs to be announced by name.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <HeaderlessDemo />
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="bottom-sheet-headerless" collapsible code={`<BottomSheet open={open} onClose={() => setOpen(false)}>
+  <Typography variant="body2" sx={{ mb: 2 }}>
+    Omitting the title renders the body only, with no header row and no
+    close button.
+  </Typography>
+  <Button
+    variant="contained"
+    label="Done"
+    onClick={() => setOpen(false)}
+  />
+</BottomSheet>`} />
+</div>
+
+<a id="Action List">
+  <h2>Action List</h2>
+</a>
+
+The most common bottom sheet pattern: a short list of actions that apply to the item the user just selected. Picking an action closes the sheet.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <ActionListDemo />
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="bottom-sheet-action-list" collapsible code={`const actions = ['Share', 'Duplicate', 'Move to folder', 'Delete'];
+
+const handleSelect = (action) => {
+  setSelected(action);
+  setOpen(false);
+};
+
+<BottomSheet
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Choose an Action"
+>
+  <List disablePadding>
+    {actions.map((action) => (
+      <ListItemButton key={action} onClick={() => handleSelect(action)}>
+        <ListItemText primary={action} />
+      </ListItemButton>
+    ))}
+  </List>
+</BottomSheet>`} />
+</div>
+
+<a id="Scrollable Content">
+  <h2>Scrollable Content</h2>
+</a>
+
+`maxHeight` caps how much of the viewport the sheet occupies, defaulting to `80vh`. Content taller than the cap scrolls within the body while the header stays fixed.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <ScrollableDemo />
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="bottom-sheet-scrollable" collapsible code={`<BottomSheet
+  open={open}
+  onClose={() => setOpen(false)}
+  title="All Resources"
+  maxHeight="50vh"
+>
+  {rows.map((row, index) => (
+    <Box key={row}>
+      <Typography variant="body2" sx={{ py: 1 }}>
+        {row}
+      </Typography>
+      {index < rows.length - 1 && <Divider />}
+    </Box>
+  ))}
+</BottomSheet>`} />
+</div>
+
+<a id="Custom Header">
+  <h2>Custom Header</h2>
+</a>
+
+`headerBackgroundColor` and `headerTextColor` override the theme defaults, and `closeButtonAriaLabel` names the close button for assistive technology. `headerTextColor` sets both the title and the close icon, so pick a pair that clears the WCAG AA 4.5:1 contrast ratio: `#000000` on `#00B39F` reaches 7.9:1, while white on the same background reaches only 2.6:1.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <CustomHeaderDemo />
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="bottom-sheet-custom-header" collapsible code={`<BottomSheet
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Connection Removed"
+  headerBackgroundColor="#00B39F"
+  headerTextColor="#000000"
+  closeButtonAriaLabel="Close connection notice"
+>
+  <Typography variant="body2">
+    The header background and text colors are overridden, and the close
+    button carries a specific accessible label.
+  </Typography>
+</BottomSheet>`} />
+</div>
diff --git a/src/collections/sistent/components/bottom-sheet/guidance.mdx b/src/collections/sistent/components/bottom-sheet/guidance.mdx
new file mode 100644
index 0000000000000..234221fb008b4
--- /dev/null
+++ b/src/collections/sistent/components/bottom-sheet/guidance.mdx
@@ -0,0 +1,279 @@
+---
+title: BottomSheet Guidance
+component: bottom-sheet
+description: This guide covers when to reach for a bottom sheet, how to size and structure its content, and the accessibility expectations the component sets.
+---
+
+import { useState } from "react";
+import {
+  BottomSheet,
+  Button,
+  Box,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemText,
+  Divider,
+} from "@sistent/sistent";
+
+export const ActionsSheetDemo = () => {
+  const [open, setOpen] = useState(false);
+  const actions = ["Share design", "Duplicate design", "Export as PNG", "Delete design"];
+  return (
+    <Box>
+      <Button
+        variant="contained"
+        label="Show Actions"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Design Actions"
+      >
+        <List disablePadding>
+          {actions.map((action) => (
+            <ListItemButton key={action} onClick={() => setOpen(false)}>
+              <ListItemText primary={action} />
+            </ListItemButton>
+          ))}
+        </List>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const DetailsSheetDemo = () => {
+  const [open, setOpen] = useState(false);
+  const details = [
+    ["Cluster", "production-us-east"],
+    ["Namespace", "meshery"],
+    ["Status", "Running"],
+    ["Replicas", "3 of 3 available"],
+  ];
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        label="View Details"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Workload Details"
+      >
+        {details.map(([label, value], index) => (
+          <Box key={label}>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                gap: 2,
+                py: 1,
+              }}
+            >
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                {label}
+              </Typography>
+              <Typography variant="body2">{value}</Typography>
+            </Box>
+            {index < details.length - 1 && <Divider />}
+          </Box>
+        ))}
+      </BottomSheet>
+    </Box>
+  );
+};
+
+export const CompactSheetDemo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Box>
+      <Button
+        variant="outlined"
+        label="Confirm Removal"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Remove Connection"
+        maxHeight="40vh"
+      >
+        <Typography variant="body2" sx={{ mb: 2 }}>
+          This connection will be removed from the workspace. Existing designs
+          that reference it will keep their configuration.
+        </Typography>
+        <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
+          <Button
+            variant="outlined"
+            label="Cancel"
+            onClick={() => setOpen(false)}
+          />
+          <Button
+            variant="contained"
+            label="Remove"
+            onClick={() => setOpen(false)}
+          />
+        </Box>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+<a id="Usage">
+  <h2>Usage</h2>
+</a>
+
+A bottom sheet interrupts the page only as much as it needs to. It keeps the user anchored in the view they were already looking at, which makes it the right container for content that supports the current task rather than replacing it.
+
+- Present contextual actions for an item the user has just selected
+- Reveal supplementary detail about a row, card, or canvas node
+- Offer filters, sorting, or compact navigation on small screens
+- Collect a short piece of input without navigating away from the page
+
+<a id="Basic Example">
+  <h3>Basic Example</h3>
+</a>
+
+A bottom sheet holding a list of contextual actions. Selecting an action closes the sheet and returns the user to the page.
+
+<Row className="image-container">
+  <ThemeWrapper>
+    <div style={{ width: "100%" }}>
+      <ActionsSheetDemo />
+    </div>
+  </ThemeWrapper>
+</Row>
+
+<a id="When to Use">
+  <h2>When to Use</h2>
+</a>
+
+<h3>Contextual Actions</h3>
+
+When a user selects an item and several actions apply to it, a bottom sheet lists those actions in one reachable place without covering the surroundings of the item the way a centered dialog would.
+
+<h3>Supplementary Details</h3>
+
+Use a bottom sheet to expand on something already visible on the page. The underlying context stays behind the backdrop, so the user does not lose their position in a long list or a large canvas.
+
+<Row className="image-container">
+  <ThemeWrapper>
+    <div style={{ width: "100%" }}>
+      <DetailsSheetDemo />
+    </div>
+  </ThemeWrapper>
+</Row>
+
+<h3>Short Confirmations</h3>
+
+A small sheet with a tightened maximum height works well for a brief confirmation, where the message is one or two sentences and the choice is binary.
+
+<Row className="image-container">
+  <ThemeWrapper>
+    <div style={{ width: "100%" }}>
+      <CompactSheetDemo />
+    </div>
+  </ThemeWrapper>
+</Row>
+
+<a id="When Not to Use">
+  <h2>When Not to Use</h2>
+</a>
+
+- **Long multi-step flows.** A sheet capped at a fraction of the viewport is a poor host for a wizard. Use a full page or a Modal instead.
+- **Persistent side navigation.** Primary navigation that should stay on screen belongs in a permanent or persistent Drawer.
+- **Blocking errors that must be acknowledged.** A bottom sheet is dismissed by a backdrop click, so it is the wrong container for a message the user must not miss. Use a Modal.
+- **Content the user needs while interacting with the page.** A sheet sits above the page behind a backdrop. If the user must keep working underneath it, use a Popper or an inline panel.
+
+<a id="Props">
+  <h2>Props</h2>
+</a>
+
+<div className="table-container">
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>open</td>
+        <td>boolean</td>
+        <td>-</td>
+        <td>Controls whether the sheet is visible. The component is fully controlled, so this value must come from state.</td>
+      </tr>
+      <tr>
+        <td>onClose</td>
+        <td>function</td>
+        <td>-</td>
+        <td>Called when the user dismisses the sheet through the close button, a backdrop click, or the Escape key.</td>
+      </tr>
+      <tr>
+        <td>title</td>
+        <td>string</td>
+        <td>-</td>
+        <td>Heading shown in the sheet header, and the only prop that supplies the accessible name of the sheet through <code>aria-labelledby</code>. When omitted the header, including the close button, is not rendered and the sheet is announced without a name.</td>
+      </tr>
+      <tr>
+        <td>children</td>
+        <td>node</td>
+        <td>-</td>
+        <td>Content rendered in the scrollable body of the sheet.</td>
+      </tr>
+      <tr>
+        <td>maxHeight</td>
+        <td>string</td>
+        <td>80vh</td>
+        <td>Upper bound on the height of the sheet. Content beyond this height scrolls within the body.</td>
+      </tr>
+      <tr>
+        <td>closeButtonAriaLabel</td>
+        <td>string</td>
+        <td>Close</td>
+        <td>Accessible label applied to the header close button.</td>
+      </tr>
+      <tr>
+        <td>headerBackgroundColor</td>
+        <td>string</td>
+        <td>theme surface.tint</td>
+        <td>Overrides the header background color.</td>
+      </tr>
+      <tr>
+        <td>headerTextColor</td>
+        <td>string</td>
+        <td>theme text.primary</td>
+        <td>Overrides the header title and close icon color. Pair it with a <code>headerBackgroundColor</code> that clears the WCAG AA 4.5:1 contrast ratio.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<a id="Best Practices">
+  <h2>Best Practices</h2>
+</a>
+
+- **Keep content short.** A bottom sheet is a glance, not a page. If the body needs heavy scrolling, the content belongs in a Modal or a dedicated route.
+- **Always give a title when the content needs framing.** The title is the only source of the accessible name of the sheet, so omit it only for short action lists whose own content makes the purpose obvious.
+- **Size deliberately.** Leave the maximum height at its 80vh default for browsing content, and tighten it for short confirmations so the sheet does not claim more of the screen than it needs.
+- **Keep actions inside the body.** The header holds the title and close button only. Place confirm and cancel buttons at the end of the body, aligned to the trailing edge.
+- **Do not stack sheets.** Opening a second sheet from within a sheet buries the context the user came from. Replace the content of the current sheet instead.
+- **Close on completion.** Once the user picks an action or submits input, close the sheet so the result is visible on the page underneath.
+- **Preserve the backdrop.** The dimmed backdrop signals that the page is paused. Do not layer other interactive surfaces over it while the sheet is open.
+- **Use theme colors first.** Reach for the header color overrides only for a deliberate treatment, check the result in both light and dark mode, and confirm the pair clears the WCAG AA 4.5:1 contrast ratio. Brand backgrounds such as `#00B39F` need a dark foreground rather than white.
+
+<a id="Accessibility">
+  <h2>Accessibility</h2>
+</a>
+
+- The sheet renders as a modal surface, so focus is trapped inside it while it is open and returns to the trigger when it closes.
+- Supplying a title wires the heading to the sheet through `aria-labelledby`, giving it an accessible name. No other prop names the surface, so a headerless sheet has none: keep the body short and self-describing, and reach for a title as soon as the sheet carries anything a screen reader user would need announced up front.
+- The Escape key dismisses the sheet, matching the behavior users expect from every other modal surface in Sistent.
+- Set an explicit close button label, such as "Close design actions", when a page can open more than one sheet.
+- Keep interactive targets in the sheet at least 44 by 44 pixels so they remain comfortable to hit on touch devices.
diff --git a/src/collections/sistent/components/bottom-sheet/index.mdx b/src/collections/sistent/components/bottom-sheet/index.mdx
new file mode 100644
index 0000000000000..b6fc5aaf938be
--- /dev/null
+++ b/src/collections/sistent/components/bottom-sheet/index.mdx
@@ -0,0 +1,105 @@
+---
+name: "BottomSheet"
+title: BottomSheet
+published: true
+component: bottom-sheet
+description: A bottom sheet is a surface that slides up from the bottom edge of the screen to present supplementary content or actions without navigating away from the current view. It spans the full width, is capped to a maximum height, and can be dismissed with the close button, a backdrop click, or the Escape key.
+---
+
+import { useState } from "react";
+import { BottomSheet, Button, Typography, Box } from "@sistent/sistent";
+
+export const BasicBottomSheetDemo = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Box>
+      <Button
+        variant="contained"
+        label="Open Bottom Sheet"
+        onClick={() => setOpen(true)}
+      />
+      <BottomSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Deployment Details"
+      >
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          The bottom sheet is anchored to the bottom edge of the viewport and
+          slides up over the current page.
+        </Typography>
+        <Typography variant="body2">
+          Dismiss it with the close button in the header, by clicking the
+          backdrop, or by pressing the Escape key.
+        </Typography>
+      </BottomSheet>
+    </Box>
+  );
+};
+
+Bottom sheets are surfaces anchored to the bottom edge of the screen. They slide up over the current page to reveal supplementary content, contextual details, or a short list of actions, and then slide back down once the user is done, leaving the underlying page exactly where it was.
+
+Because they originate from the bottom of the screen, bottom sheets sit within comfortable thumb reach on mobile devices, which makes them a natural fit for touch-first interfaces. On larger screens they read as a full-width panel that keeps the user anchored in their current context.
+
+<a id="Basic Bottom Sheet">
+  <h2>Basic Bottom Sheet</h2>
+</a>
+
+A bottom sheet with a header title and body content. The sheet is controlled through the `open` prop and closed through the `onClose` callback.
+
+<Row className="image-container">
+  <ThemeWrapper>
+    <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
+      <BasicBottomSheetDemo />
+    </div>
+  </ThemeWrapper>
+</Row>
+
+<a id="Key Features">
+  <h2>Key Features</h2>
+</a>
+
+The Sistent BottomSheet component provides the following capabilities:
+
+<h3>Bottom Anchored Surface</h3>
+
+The sheet is pinned to the bottom edge of the viewport, spans the full width, and carries rounded top corners so it reads as a surface rising from the edge of the screen rather than a floating dialog.
+
+<h3>Optional Header</h3>
+
+Passing a `title` renders a header row containing the title and a close button. Omit `title` and the sheet renders content only, which suits compact action lists that need no heading. Because `title` is also what supplies the accessible name, a headerless sheet is announced without one, so keep that variant for bodies that describe themselves.
+
+<h3>Height Control</h3>
+
+The `maxHeight` prop caps how much of the screen the sheet may occupy, defaulting to `80vh`. Content taller than that cap scrolls inside the sheet while the header stays fixed in place.
+
+<h3>Themeable Header</h3>
+
+The header inherits `surface.tint` and `text.primary` from the active Sistent theme, and `headerBackgroundColor` and `headerTextColor` override those defaults when a specific treatment is needed.
+
+<h3>Accessible by Default</h3>
+
+When a `title` is supplied it is wired to the sheet through `aria-labelledby`, focus is trapped inside the surface while it is open, and the close button carries an accessible label that can be customized with `closeButtonAriaLabel`. `title` is the only prop that names the sheet itself, so supply one whenever screen reader users need the surface announced by name.
+
+<h3>Multiple Dismissal Paths</h3>
+
+The `onClose` callback fires from the header close button, a backdrop click, and the Escape key, so users always have a predictable way out of the sheet.
+
+<a id="Common Use Cases">
+  <h2>Common Use Cases</h2>
+</a>
+
+<h3>Contextual Actions</h3>
+
+Present a short list of actions that apply to an item the user has just selected, such as sharing, renaming, or deleting a resource.
+
+<h3>Supplementary Details</h3>
+
+Reveal secondary information about a row in a table or a node on a canvas without pushing the user to a separate page.
+
+<h3>Mobile Navigation and Filters</h3>
+
+Surface filters, sorting options, or a compact navigation menu on small screens, where a bottom anchored surface is easier to reach than a top or side panel.
+
+<h3>Short Focused Forms</h3>
+
+Collect a small amount of input, such as a name or a single selection, while the underlying context stays visible behind the backdrop.