@imfusion/web-ui 0.10.1-dev.2.gb6347f49 → 0.10.1-dev.34.gb01a818e

package/src/docgen/doc.gen.json

@@ -2,7 +2,7 @@
   "account-card": {
     "root": {
       "name": "AccountCard.Root",
-      "description": "AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The\naction sits beside the link, not inside it, since a link cannot contain a button.",
+      "description": "AccountCard.Root — the signed-in person's row, holding `AccountCard.Avatar`, `AccountCard.Title`, `AccountCard.Subtitle`,\n`AccountCard.Description`, `AccountCard.Role`, and, at its top right, `AccountCard.Action`. The row itself is not\ninteractive; the action's buttons are.",
       "props": [
         {
           "name": "context",
@@ -23,7 +23,7 @@
     "subComponents": [
       {
         "name": "AccountCard.Action",
-        "description": "AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The\nbutton carries its own `aria-label` and its own `context`.",
+        "description": "AccountCard.Action — the card's top-right slot for ghost `IconButton`s, such as one that logs out. The\nbutton carries its own `aria-label` and its own `context`.",
         "props": [
           {
             "name": "ref",
@@ -49,7 +49,7 @@
             "name": "size",
             "required": false,
             "type": "\"sm\" | \"md\" | \"lg\" | null",
-            "defaultValue": "md",
+            "defaultValue": "sm",
             "description": "The avatar size."
           },
           {
@@ -63,33 +63,7 @@
       },
       {
         "name": "AccountCard.Description",
-        "description": "AccountCard.Description — the organization, under a rule at the foot of the card.",
-        "props": [
-          {
-            "name": "ref",
-            "required": false,
-            "type": "Ref<HTMLDivElement>",
-            "defaultValue": null,
-            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
-          }
-        ]
-      },
-      {
-        "name": "AccountCard.Group",
-        "description": "AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current=\"page\"`\nshows as current; a standalone card is always the signed-in account and shows no current state.",
-        "props": [
-          {
-            "name": "ref",
-            "required": false,
-            "type": "Ref<HTMLDivElement>",
-            "defaultValue": null,
-            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
-          }
-        ]
-      },
-      {
-        "name": "AccountCard.Link",
-        "description": "AccountCard.Link — the link to the account, holding `AccountCard.Avatar`, `AccountCard.Title`,\n`AccountCard.Subtitle`, `AccountCard.Description`, and `AccountCard.Role`. Pass a router link through `render`. Its\naccessible name is its text; the avatar stays decorative.",
+        "description": "AccountCard.Description — the organization, set apart below the subtitle.",
         "props": [
           {
             "name": "ref",
@@ -97,19 +71,12 @@
             "type": "Ref<HTMLDivElement>",
             "defaultValue": null,
             "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
-            "defaultValue": null,
-            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
           }
         ]
       },
       {
         "name": "AccountCard.Role",
-        "description": "AccountCard.Role — a mono uppercase label beside the description, such as the person's role.",
+        "description": "AccountCard.Role — a mono uppercase label under the description, such as the person's role.",
         "props": [
           {
             "name": "ref",
@@ -135,7 +102,7 @@
       },
       {
         "name": "AccountCard.Title",
-        "description": "AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before\nan `@` and after a dot.",
+        "description": "AccountCard.Title — the account's name, or the email's local part until a name exists. Text wraps before an `@` and\nafter a dot.",
         "props": [
           {
             "name": "ref",
@@ -167,6 +134,13 @@
         "name": "AppShell.Aside",
         "description": "Below `lg` the aside opens as a drawer: from the bottom on phones, from the inline end on tablets.",
         "props": [
+          {
+            "name": "closeLabel",
+            "required": false,
+            "type": "string",
+            "defaultValue": "Close panel",
+            "description": "Accessible name of the close button shown while the aside is a drawer."
+          },
           {
             "name": "onOpenChange",
             "required": false,
@@ -213,7 +187,7 @@
       },
       {
         "name": "AppShell.Burger",
-        "description": "AppShell.Burger — the header's menu toggle: three sheared bands that cross when `opened`. Takes its color from the\nsurface and hides from `md` up, where the navbar is docked.",
+        "description": "AppShell.Burger — the menu toggle: three sheared bands that cross while the navbar drawer is open. With no props it\nopens and closes that drawer. Takes its color from the surface and hides from `md` up, where the navbar is docked, and\nsteps back while the drawer is open, so the drawer's own close is the only one shown.",
         "props": [
           {
             "name": "className",
@@ -247,8 +221,8 @@
             "name": "opened",
             "required": false,
             "type": "boolean",
-            "defaultValue": "false",
-            "description": "Whether the navigation it controls is open; draws the cross and sets `aria-expanded`."
+            "defaultValue": null,
+            "description": "Draws the cross and sets `aria-expanded`. Defaults to whether the navbar drawer is open."
           },
           {
             "name": "ref",
@@ -314,8 +288,22 @@
       },
       {
         "name": "AppShell.Navbar",
-        "description": "`variant=\"branded\"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a\ndrawer from the inline end.",
+        "description": "The navbar owns its frame: `logo` on top, the children (nav items) in the middle, `account` at the foot. Without a\nHeader the logo's bottom edge sits on the baseline of Main's first heading. `variant=\"branded\"` paints the primary\ncolor; children opt into on-color themselves. Below `md` the navbar opens as a drawer from the inline start, with its\nclose on the logo row.",
         "props": [
+          {
+            "name": "account",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "The signed-in account at the foot of the rail, usually an `AccountCard`. Without it the foot is omitted."
+          },
+          {
+            "name": "logo",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": "<ImFusionLogo variant={variant === \"branded\" ? \"oncolor\" : \"brand\"} size=\"sm\" />",
+            "description": "The brand at the top of the rail. Defaults to the ImFusion logo; `null` leaves the row empty."
+          },
           {
             "name": "onOpenChange",
             "required": false,
@@ -348,7 +336,7 @@
       },
       {
         "name": "AppShell.NavItem",
-        "description": "AppShell.NavItem — a navbar link: icon, mono label, and an optional description. Takes its color from the navbar;\n`aria-current=\"page\"` marks the current page. Pass a router link through `render`.",
+        "description": "AppShell.NavItem — a navbar link: icon, mono label, and an optional description. Takes its color from the navbar;\n`aria-current=\"page\"` underlines the label. Pass a router link through `render`.",
         "props": [
           {
             "name": "description",
@@ -707,7 +695,7 @@
       },
       {
         "name": "Callout.Title",
-        "description": "Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice.",
+        "description": "Callout.Title — an optional short heading, set in the mono UPPERCASE technical voice.",
         "props": [
           {
             "name": "ref",
@@ -1389,6 +1377,99 @@
       }
     ]
   },
+  "color-scheme-toggle": {
+    "root": {
+      "name": "ColorSchemeToggle",
+      "description": "ColorSchemeToggle - lets the user pick Light, System, or Dark. It reads and stores the preference through\n`useColorScheme`, so placing it is enough. System stays pressed while the page follows the operating system.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ToggleGroupState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "darkLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Dark",
+          "description": "Text of the segment that picks the dark scheme."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the toggle group should ignore user interaction."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Color scheme",
+          "description": "Accessible name of the group."
+        },
+        {
+          "name": "lightLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Light",
+          "description": "Text of the segment that picks the light scheme."
+        },
+        {
+          "name": "loopFocus",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "Orientation",
+          "defaultValue": "horizontal",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ToggleGroupState>",
+          "defaultValue": null,
+          "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "systemLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": "System",
+          "description": "Text of the segment that follows the operating system."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "copy-button": {
     "root": {
       "name": "CopyButton",
@@ -1517,6 +1598,828 @@
     },
     "subComponents": []
   },
+  "dialog": {
+    "root": {
+      "name": "Dialog.Root",
+      "description": "Dialog.Root — container that manages open/closed state.",
+      "props": [
+        {
+          "name": "actionsRef",
+          "required": false,
+          "type": "RefObject<DialogRootActions | null>",
+          "defaultValue": null,
+          "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+        },
+        {
+          "name": "children",
+          "required": false,
+          "type": "ReactNode | PayloadChildRenderFunction<Payload>",
+          "defaultValue": null,
+          "description": "The content of the dialog.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger."
+        },
+        {
+          "name": "defaultOpen",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+        },
+        {
+          "name": "defaultTriggerId",
+          "required": false,
+          "type": "string | null",
+          "defaultValue": null,
+          "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+        },
+        {
+          "name": "disablePointerDismissal",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+        },
+        {
+          "name": "handle",
+          "required": false,
+          "type": "DialogHandle<Payload>",
+          "defaultValue": null,
+          "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+        },
+        {
+          "name": "modal",
+          "required": false,
+          "type": "boolean | \"trap-focus\"",
+          "defaultValue": "true",
+          "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+        },
+        {
+          "name": "onOpenChange",
+          "required": false,
+          "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+          "defaultValue": null,
+          "description": "Event handler called when the dialog is opened or closed."
+        },
+        {
+          "name": "onOpenChangeComplete",
+          "required": false,
+          "type": "(open: boolean) => void",
+          "defaultValue": null,
+          "description": "Event handler called after any animations complete when the dialog is opened or closed."
+        },
+        {
+          "name": "open",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": "Whether the dialog is currently open."
+        },
+        {
+          "name": "triggerId",
+          "required": false,
+          "type": "string | null",
+          "defaultValue": null,
+          "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Dialog.Backdrop",
+        "description": "Dialog.Backdrop — flat dark overlay that dims the page behind the dialog.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogBackdropState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "forceRender",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the backdrop is forced to render even when nested."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogBackdropState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogBackdropState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Body",
+        "description": "Dialog.Body — the scrolling region between header and footer, a ScrollArea with the library's thumb and edge fades.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ScrollAreaRootState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"none\" | \"both\" | \"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Which scrollbars to render. `both` also adds the Corner; `none` scrolls and fades without a visible bar."
+          },
+          {
+            "name": "overflowEdgeThreshold",
+            "required": false,
+            "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+            "defaultValue": "0",
+            "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Close",
+        "description": "Dialog.Close — button that closes the dialog. With no `children` and no `render` it renders the library's ghost close\nbutton (an × icon labelled \"Close\"); otherwise render your own `Button`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogCloseState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogCloseState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogCloseState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Description",
+        "description": "Dialog.Description — supplementary paragraph that describes the dialog for screen readers, set as `Typo.P`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: DialogDescriptionState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogDescriptionState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogDescriptionState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Footer",
+        "description": "Dialog.Footer — row of actions pinned to the bottom of the popup.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Header",
+        "description": "Dialog.Header — band at the top of the popup that holds the title, description, and close button.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band. On `primary` the title, description, and close button turn light."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Inline",
+        "description": "Dialog.Inline — like Dialog.Simple, but the trigger is text inside a sentence.",
+        "props": [
+          {
+            "name": "actions",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the footer, usually buttons. The footer renders only when this is set."
+          },
+          {
+            "name": "actionsRef",
+            "required": false,
+            "type": "RefObject<DialogRootActions | null>",
+            "defaultValue": null,
+            "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+          },
+          {
+            "name": "children",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the body."
+          },
+          {
+            "name": "defaultOpen",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+          },
+          {
+            "name": "defaultTriggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+          },
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Line of context under the title."
+          },
+          {
+            "name": "disablePointerDismissal",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+          },
+          {
+            "name": "eyebrow",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Short uppercase label above the title."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<Payload>",
+            "defaultValue": null,
+            "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "headerVariant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band."
+          },
+          {
+            "name": "modal",
+            "required": false,
+            "type": "boolean | \"trap-focus\"",
+            "defaultValue": "true",
+            "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+          },
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the dialog is opened or closed."
+          },
+          {
+            "name": "onOpenChangeComplete",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Event handler called after any animations complete when the dialog is opened or closed."
+          },
+          {
+            "name": "open",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Whether the dialog is currently open."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window."
+          },
+          {
+            "name": "status",
+            "required": false,
+            "type": "| NonNullable<\n    \"info\" | \"positive\" | \"warning\" | \"negative\" | null\n  >\n| undefined",
+            "defaultValue": null,
+            "description": "Adds a `Dialog.Status` with this variant at the start of the popup."
+          },
+          {
+            "name": "title",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Heading of the dialog."
+          },
+          {
+            "name": "trigger",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Text of the trigger, set as an inline term inside running prose."
+          },
+          {
+            "name": "triggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Popup",
+        "description": "Dialog.Popup — the window. Holds Header, Body, and Footer, or any free content.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogPopupState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "finalFocus",
+            "required": false,
+            "type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n    closeType: InteractionType\n  ) => boolean | void | HTMLElement | null)",
+            "defaultValue": null,
+            "description": "Determines the element to focus when the dialog is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."
+          },
+          {
+            "name": "initialFocus",
+            "required": false,
+            "type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n    openType: InteractionType\n  ) => boolean | void | HTMLElement | null)",
+            "defaultValue": null,
+            "description": "Determines the element to focus when the dialog is opened.\nBy default, focus moves to the first tabbable element inside the popup, except when the dialog\nis opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogPopupState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window. `full` fills the screen minus a margin."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogPopupState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Portal",
+        "description": "Dialog.Portal — renders backdrop and popup in a portal outside the main document flow.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogPortalState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "container",
+            "required": false,
+            "type": "| HTMLElement\n| ShadowRoot\n| RefObject<HTMLElement | ShadowRoot | null>\n| null",
+            "defaultValue": null,
+            "description": "A parent element to render the portal element into."
+          },
+          {
+            "name": "keepMounted",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogPortalState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogPortalState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Simple",
+        "description": "Dialog.Simple — pre-composed dialog: trigger, header with title, description, optional status and close button, a\nscrolling body, and an optional footer. Root props pass through.",
+        "props": [
+          {
+            "name": "actions",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the footer, usually buttons. The footer renders only when this is set."
+          },
+          {
+            "name": "actionsRef",
+            "required": false,
+            "type": "RefObject<DialogRootActions | null>",
+            "defaultValue": null,
+            "description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the dialog.\nCall this after any externally controlled closing animation finishes.\n- `close`: Closes the dialog imperatively when called."
+          },
+          {
+            "name": "children",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Content of the body."
+          },
+          {
+            "name": "defaultOpen",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the dialog is initially open.\n\nTo render a controlled dialog, use the `open` prop instead."
+          },
+          {
+            "name": "defaultTriggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `defaultOpen` prop to create an initially open dialog."
+          },
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Line of context under the title."
+          },
+          {
+            "name": "disablePointerDismissal",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to prevent the dialog from closing on outside presses.\nFor non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it."
+          },
+          {
+            "name": "eyebrow",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Short uppercase label above the title."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<Payload>",
+            "defaultValue": null,
+            "description": "A handle to associate the dialog with a trigger.\nIf specified, allows external triggers to control the dialog's open state.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "headerVariant",
+            "required": false,
+            "type": "HeaderVariant",
+            "defaultValue": "main",
+            "description": "Colour of the header band."
+          },
+          {
+            "name": "modal",
+            "required": false,
+            "type": "boolean | \"trap-focus\"",
+            "defaultValue": "true",
+            "description": "Determines if the dialog enters a modal state when open.\n- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed.\n- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.\n\nWhen `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so\ntouch screen readers can escape the popup."
+          },
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(\n  open: boolean,\n  eventDetails: DialogRootChangeEventDetails\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the dialog is opened or closed."
+          },
+          {
+            "name": "onOpenChangeComplete",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Event handler called after any animations complete when the dialog is opened or closed."
+          },
+          {
+            "name": "open",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Whether the dialog is currently open."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"full\"",
+            "defaultValue": "md",
+            "description": "Width of the window."
+          },
+          {
+            "name": "status",
+            "required": false,
+            "type": "| NonNullable<\n    \"info\" | \"positive\" | \"warning\" | \"negative\" | null\n  >\n| undefined",
+            "defaultValue": null,
+            "description": "Adds a `Dialog.Status` with this variant at the start of the popup."
+          },
+          {
+            "name": "title",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Heading of the dialog."
+          },
+          {
+            "name": "trigger",
+            "required": false,
+            "type": "ReactElement<\n  unknown,\n  string | JSXElementConstructor<any>\n>",
+            "defaultValue": null,
+            "description": "Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog."
+          },
+          {
+            "name": "triggerId",
+            "required": false,
+            "type": "string | null",
+            "defaultValue": null,
+            "description": "ID of the trigger that the dialog is associated with.\nThis is useful in conjunction with the `open` prop to create a controlled dialog.\nThere's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set)."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Status",
+        "description": "Dialog.Status — a tinted column at the start of the popup, spanning its full height, that marks the dialog's\nstatus with the variant's glyph. Place it first inside `Dialog.Popup`. Pass children to replace the glyph.\nDecorative (`aria-hidden`); the title carries the status.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| null",
+            "defaultValue": "info",
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Title",
+        "description": "Dialog.Title — heading that names the dialog for screen readers, set as `Typo.H2`. Light on a `primary` header.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogTitleState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogTitleState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogTitleState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Trigger",
+        "description": "Dialog.Trigger — button that opens the dialog. `inline` styles it as a dashed-underlined term inside running text.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogTriggerState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "handle",
+            "required": false,
+            "type": "DialogHandle<unknown>",
+            "defaultValue": null,
+            "description": "A handle to associate the trigger with a dialog.\nCan be created with the Dialog.createHandle() method."
+          },
+          {
+            "name": "id",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop)."
+          },
+          {
+            "name": "inline",
+            "required": false,
+            "type": "boolean | null",
+            "defaultValue": "false",
+            "description": ""
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
+          },
+          {
+            "name": "payload",
+            "required": false,
+            "type": "unknown",
+            "defaultValue": null,
+            "description": "A payload to pass to the dialog when it is opened."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogTriggerState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogTriggerState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Dialog.Viewport",
+        "description": "Dialog.Viewport — full-screen container that centres the popup.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: DialogViewportState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, DialogViewportState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: DialogViewportState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "drawer": {
     "root": {
       "name": "Drawer.Root",
@@ -5356,6 +6259,283 @@
     },
     "subComponents": []
   },
+  "scroll-area": {
+    "root": {
+      "name": "ScrollArea.Root",
+      "description": "ScrollArea.Root — groups the viewport and its scrollbars. Give it a height or max-height.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ScrollAreaRootState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "overflowEdgeThreshold",
+          "required": false,
+          "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+          "defaultValue": "0",
+          "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+          "defaultValue": null,
+          "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "ScrollArea.Auto",
+        "description": "ScrollArea.Auto — Root, Viewport, Content, and the scrollbars for `orientation`, around `children`.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ScrollAreaRootState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"none\" | \"both\" | \"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Which scrollbars to render. `both` also adds the Corner; `none` scrolls and fades without a visible bar."
+          },
+          {
+            "name": "overflowEdgeThreshold",
+            "required": false,
+            "type": "| number\n| Partial<{\n    xStart: number;\n    xEnd: number;\n    yStart: number;\n    yEnd: number;\n  }>",
+            "defaultValue": "0",
+            "description": "The threshold in pixels that must be passed before the overflow edge attributes are applied.\nAccepts a single number for all edges or an object to configure them individually."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaRootState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Content",
+        "description": "ScrollArea.Content — wraps the scrolled content so the viewport can measure it.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaContentState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaContentState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaContentState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Corner",
+        "description": "ScrollArea.Corner — the square where a vertical and a horizontal scrollbar meet.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaCornerState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaCornerState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaCornerState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Scrollbar",
+        "description": "ScrollArea.Scrollbar — overlay bar that shows while the area is hovered or scrolling.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaScrollbarState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "keepMounted",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether to keep the HTML element in the DOM when the viewport isn't scrollable."
+          },
+          {
+            "name": "orientation",
+            "required": false,
+            "type": "\"horizontal\" | \"vertical\"",
+            "defaultValue": "vertical",
+            "description": "Whether the scrollbar controls vertical or horizontal scroll."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaScrollbarState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaScrollbarState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Thumb",
+        "description": "ScrollArea.Thumb — the draggable part of the scrollbar.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaThumbState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaThumbState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaThumbState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "ScrollArea.Viewport",
+        "description": "ScrollArea.Viewport — the scrolling box. It fades its content out at each edge with more to scroll.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ScrollAreaViewportState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ScrollAreaViewportState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: ScrollAreaViewportState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "select": {
     "root": {
       "name": "Select.Root",
@@ -6396,7 +7576,7 @@
   "skeleton": {
     "root": {
       "name": "Skeleton.Root",
-      "description": "Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. While\n`loading`, sets `aria-busy` and announces `label` once, however many bones it holds. When `loading` turns false, the\ndata fades in over the bones.",
+      "description": "Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. While\n`loading`, sets `aria-busy` and announces `label` once, however many bones it holds. When `loading` turns false, the\ndata fades in.",
       "props": [
         {
           "name": "animation",
@@ -6470,6 +7650,26 @@
           }
         ]
       },
+      {
+        "name": "Skeleton.Suspense",
+        "description": "Skeleton.Suspense — a Suspense boundary whose fallback is bones in a busy Root. When the children mount after the\nfallback showed, they fade in over it. Content that was ready without suspending mounts without a fade.",
+        "props": [
+          {
+            "name": "fallback",
+            "required": true,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Bones shown while the children suspend."
+          },
+          {
+            "name": "label",
+            "required": true,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Announced once through a visually hidden status while the fallback shows."
+          }
+        ]
+      },
       {
         "name": "Skeleton.Text",
         "description": "Skeleton.Text — a text bar exactly one line of the parent's font tall. Place it inside the real Typo element so the\nrow keeps the loaded row's height.",
@@ -8183,6 +9383,13 @@
           "defaultValue": null,
           "description": "Key hint shown in the top corner at the end of the line, such as `\"P\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
         },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": "Defaults to the enclosing `ToggleGroup`'s `size`, or `\"md\"` standalone."
+        },
         {
           "name": "style",
           "required": false,
@@ -8204,7 +9411,7 @@
   "toggle-group": {
     "root": {
       "name": "ToggleGroup",
-      "description": "ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by\ndefault (a segmented control); set `multiple` for multi-select. Compose one\n`Toggle` per segment, each with a `value`.",
+      "description": "ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by\ndefault (a segmented control); set `multiple` for multi-select. Compose one\n`Toggle` per segment, each with a `value`. `size` applies to every toggle in the group.",
       "props": [
         {
           "name": "className",
@@ -8269,6 +9476,13 @@
           "defaultValue": null,
           "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": "md",
+          "description": ""
+        },
         {
           "name": "style",
           "required": false,